React-Native如何实现蒙版效果

最近需要这样的蒙版效果，有两种方式

image.png

第一种方式，使用第三方 react-native-blur

• 安装

npm i react-native-blur --save
react-native link

• 查看第三方

npm view react-native-blur

• 使用方法，在react-native-blur上有，我这里只做一下简单介绍

import React, { Component } from 'react';
import { View, Image, Text, findNodeHandle, StyleSheet } from 'react-native';
import { BlurView } from 'react-native-blur';

export default class Menu extends Component {
  constructor(props) {
    super(props);
    this.state = { viewRef: null };
  }

  imageLoaded() {
    this.setState({ viewRef: findNodeHandle(this.backgroundImage) });
  }

  render() {
    return (
      <View style={styles.container}>
        <Image
          ref={(img) => { this.backgroundImage = img; }}
          source={{uri}}
          style={styles.absolute}
          onLoadEnd={this.imageLoaded.bind(this)}
        />
        <BlurView
          style={styles.absolute}
          viewRef={this.state.viewRef}
          blurType="light"
          blurAmount={10}
        />
        <Text>Hi, I am some unblurred text</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  absolute: {
    position: "absolute",
    top: 0, left: 0, bottom: 0, right: 0,
  },
});

• 但是这里出现一个问题，安卓上无效果，于是我便开始第二个方法

方法2：使用半透明遮罩图

• 直接使用一张半透明效果的背景图，覆盖在背景视图上就好了，简单，明了，无副作用，不过图片比较难切

 return (
      <View style={{flex:1}}>        
        <ImageBackground style={{height:211,width:375}} source={require('./目标图片.png')} >
          <ImageBackground  style={{height:211,width:375}}  source={require('./半透明效果背景图.png')} >
//内容
          </ImageBackground>
        </ImageBackground>  
      </View>
    );