針對普通的彈框，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.歡迎大夥加入.