android端執行效果圖(ios同樣適用):

1.自定義彈窗原始碼:   

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Modal,
    TouchableOpacity,
} from 'react-native';

export default class RNAlertView extends Component {

  //定義靜態的屬性,可通過傳引數的方式直接傳送,那在本元件中就需要使用this.props.alertTitle等寫法
  static propTypes = {
      alertTitle: "文字標題",  //自定義文字標題
      alertContent: "文字內容",  //自定義文字內容
      cancleBtnTitle: "取消",  //自定義取消按鈕文字
      comformBtnTitle: "確定",  //自定義取消確定文字
  }

  constructor(props){
    super(props);

    this.state = ({
      isShow:false,
    })
  }

  render() {

      if (!this.state.isShow) {
          return null;
      }else {
          return (
              <Modal
                  visible={this.state.isShow}
                  //顯示是的動畫預設none
                  //從下面向上滑動slide
                  //慢慢顯示fade
                  animationType={'fade'}
                  //是否透明預設是不透明 false
                  transparent={true}
                  //關閉時呼叫
                  onRequestClose={() => {}}
              >
                  <View style = {styles.container}>
                      <View style = {styles.AlertView}>
                          <View style = {{justifyContent:'center', alignItems:'center', height:30}}><Text style = {{fontSize:18, fontWeight:'900'}}>{this.props.alertTitle}</Text></View>
                          <View style = {{justifyContent:'center', alignItems:'center', height:50}}><Text style = {{fontSize:16, color:'grey'}}>{this.props.alertContent}</Text></View>
                          <View style = {{height:1, backgroundColor:'lightgrey'}}></View>

                          <View style = {{flexDirection:'row', height:50}}>
                              <TouchableOpacity  onPress = {() => {this.dissmiss(0.5);this.dissmiss(); this.props.comformClik ? this.props.comformClik() : null} } style = {{flex:0.49, justifyContent:'center', alignItems:'center'}}>
                                  <Text style = {{fontSize:18, color:'red'}}>確定</Text>
                              </TouchableOpacity>

                              <View style = {{height:50, backgroundColor:'lightgrey', width:1}}></View>

                              <TouchableOpacity  onPress = {() => {this.dissmiss(0.5);this.dissmiss(); this.props.dissmissClick? this.props.dissmissClick() : null} } style = {{flex:0.49, justifyContent:'center', alignItems:'center'}}>
                                  <Text style = {{fontSize:18, color:'blue'}}>取消</Text>
                              </TouchableOpacity>

                          </View>
                      </View>
                  </View>
              </Modal>
          )
      };


  }

  //顯示
  show(title,content){
    this.setState({
        isShow:true,  //顯示彈窗
        alertTitle:title,
        alertContent:content,
    })
  }

  //消失彈窗
    dissmiss = (delay) => {
    // 延時0.5,據說體驗比較好
        let duration = 0;

        if (delay == null || delay <= 0){
            duration = 3;
        }else {
            duration = delay;
        }

        this.timer = setTimeout(() => {
            this.setState({
                isShow:false,
            });
            this.timer && clearTimeout(this.timer);
        },duration*1000);
    }

}

const styles = StyleSheet.create({

    container:{
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      justifyContent: 'center',
      flex:1,
      backgroundColor:'rgba(0,0,0,0.1)',
    },

    AlertView:{
      backgroundColor:'white',
      borderRadius:10,
      borderWidth:1,
      height:130,
      marginLeft:30,
      marginRight:30,
      borderColor:'lightgrey',
    }
})
 

為了在專案中全域性使用,建議配置在Global中,如下:

1>Global檔案原始碼:

import React, { Component } from 'react';
import RNAlertView from './RNAlertView'; //自定義彈框

//自定義Alert
global.RNAlert = RNAlertView;

2>在程式入口加入Global檔案:

在index.js檔案中加入:

import { AppRegistry } from 'react-native';
import App from './App';
import './Global';
AppRegistry.registerComponent('GlobalApp', () => App);
 

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
    Alert
} from 'react-native';

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>

        <RNAlert ref = 'RNAlert' comformBtnTitle = {'確定'}  cancleBtnTitle = {'取消'} 
         alertTitle={'文字標題'} alertContent={'content'}comformClik = {() => {this._sure()}} 
         dissmissClick = {() => {this._cancel()}}
        />
 


        <Text style={styles.welcome} onPress={()=> this._show()}>
          點我->彈出框
        </Text>
      </View>
    );
  }

    _show =()=>{
        this.refs.RNAlert && this.refs.RNAlert.show('標題','文字內容');
    }

    _sure=()=>{

      Alert.alert('點選了確定')

    }

    _cancel=()=>{

    Alert.alert('點選了取消')

    }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

總結:

      這樣配置以後,以後就只需要在render裡面寫進去,再通過  this.refs.RNAlert && this.refs.RNAlert.show('標題','文字內容');  就可以直接拿來使用了.在其他介面也是這樣,非常方便.

如有問題,歡迎交流.