React Native之Modal实现自定义Dialog

       针对普通的弹框，React Native（RN）给我们提供了有Alert,但使用局限性很大，没有办法自定义，要实现自定义的弹框，我们应该如何来实现呢，这里提供两种方法：第一就是native本地来实现，然后暴露给RN来条用，第二就是使用组件Modal来实现，第一种方法这里就不写了，这里讲解下用Modal如何来实现。

      首先我们先来了解下Modal是什么。

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

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

      常见的属性：

      animationType： enum('none', 'slide', 'fade')   动画类型

      onRequestClose： Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func 

      onShow： function  显示完毕的回调方法

      transparent： bool  是否为透明，默认为不透明，弹框需要将这个设置成 true.

      visible： bool   是否显示

      示例：

      我们先创建一个ShareModal.返回一个Modal组件。     

<Modal
              animationType='fade'
              transparent={true}
              visible={this.state.visible}
              onShow={this.onShow.bind(this)}
              onRequestClose={() =>console.log('onRequestClose...')} >

       <View style={[styles.modalStyle,backgroundStyle]}>
       <View style={styles.subView}>
       <Text style={{fontSize:18}}>选择分享方式</Text>
       <View style={{flex:1,flexDirection:'row'}}>
       <View style={styles.item}>
       <Image resizeMode='contain' style={styles.image} source={require('./../../images/share_wechattimelineicon.png')}/>
       <Text>微信朋友圈</Text>
       </View>
       <View style={styles.item}>
       <Image resizeMode='contain' style={styles.image}  source={require('./../../images/share_wechaticon.png')}/>
       <Text>微信好友</Text>
       </View>
       <View style={styles.item}>
       <Image resizeMode='contain' style={styles.image}  source={require('./../../images/share_weiboicon.png')}/>
       <Text>新浪微博</Text>
       </View>
       </View>
       <View style={{width:Util.size.width,height:Util.pixel,backgroundColor:'#ddd'}}/>
       <Button onPress={this.close.bind(this,false)}>取消</Button>
       </View>
       </View>
       </Modal>

效果图：

通过Modal定义的弹框，有两个不足.

一：背景透明层也是Modal的一部分，如果animationType是slide方式，则透明背景会一起滑动，体验很不友好，fade模式相对好点.

二：没有类似于原生的的setCancelable方法，不过我们可以模拟实现这种效果，就是在透明区域加一层view，点击该层view则close当前modal.

RN开发群：527459711.欢迎大伙加入.