【React-native】通过 Modal 模态弹出框制作二维码分享

由于客户需要，在点击分享时，展示二维码供其他客户扫码下载app，故使用此组件来解决。先上效果：

官方说明：

Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。

在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。

常用属性：

animationType：['none', 'slide', 'fade']，动画特效，无特效/淡入/淡出。
transparent：是否为透明，默认不透明，弹出框为 true.
visible： bool 是否显示Modal层

更多属性连接：https://reactnative.cn/docs/0.48/modal.htm

那么，让我们来一起探索下这个组件吧。

环境：

react-native 版本：0.35.0

系统版本：mac：10.13.3 (17D47)

测试机：Simulator 中 IPhone 7 Plus 以及真机华为荣耀V9

这里分为三步走：

1，在页面创建分享图标。

2，添加Modal层(包含一个二维码)。

3，Modal层通过state中的状态来显示or隐藏，点击分享图标来对state中的状态进行更改。

一，首先，需要在app界面上增加一个分享的图标。如下：

图标点击代码：

<TouchableOpacity
    onPress={this._rightAction}
    style={{
        marginTop: 15,
        marginRight: 15,
        paddingRight: 5,
        alignSelf:'flex-end',
        backgroundColor:'rgba(52, 52, 52, 0.0)',
    }}
>
    <Icons
        name="md-share"
        size={25}
        color="#ffffff"
    />
</TouchableOpacity>

PS:这里使用了图标库中的 "md-share" 图标，故需引入【react-native-vector-icons/Ionicons】需执行npm install react-native-vector-icons --save 该库是一个强大的图标库，之后会介绍。

二，Modal层。

<Modal
      visible={this.state.visible}
      transparent={this.state.transparent}>
      <View
           style={{
                   flex: 1,
                   justifyContent: 'center',
                   alignItems: 'center',
                   backgroundColor: 'rgba(0, 0, 0, 0.6)'
                  }}>
           <TouchableOpacity activeOpacity={0.6} onPress={this._rightAction}>
                   <Image
                         style={{
                                 height: (USER_BG_HEIGHT - NOTIFICATION_HEIGHT),
                                 width: WINDOW_WIDTH/2,
                                }}
                         source={require('../../image/user_bg_pic.png')}
                   />
           </TouchableOpacity>
      </View>
</Modal>

这里添加的图片为一张测试图片，并不是真正的二维码，TouchableOpacity中的onPress事件为改变state中的visible状态，默认为false。

三，设置state中状态

state中初始化的属性，注意需要绑定rightAction。

 constructor(props) {
        this._rightAction = this._rightAction.bind(this);
        this.state = {
            visible: false,
            transparent: true,
        };
    }

_rightAction(){
        this.setState({visible:!this.state.visible});
    }

最终图：

如果有什么好的建议或者新问题，欢迎留言交流。

【20180901】BUG修复

经过客户体验，发现点击二维码才能返回，按物理返回键与二维码以外部分不能返回，原来，我这个点击事件得调整一下。TouchableOpacity事件挪到外层View之上，然后View的style给TouchableOpacity即可。

【React-native】通过 Modal 模态弹出框制作二维码分享

猜你喜欢