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.欢迎大伙加入.