react native confirm组件，alert组件

// index.js
import React from 'react';
import {
  Text,
  View,
  Modal,
  TouchableOpacity,
} from 'react-native';
import styles from './style';

/**
 * 使用方法
 * @param {boolean}  [show]        布尔值，是否显示 
 * @param {function} [success]     确认按钮回调
 * @param {function} [fail]        取消按钮回调
 * @param {string}   [type]        alert和confirm两种类型，默认为alert
 * @param {strint}   [cancelText]  取消的按钮 文字，可自定义  默认为 ‘取消’
 * @param {strint}   [confirmText] 确认的按钮 文字，可自定义  默认为 ‘确认’
 * @param {string}   [title]       标题  默认为 ‘提示’
 */


// alert和confirm确认框
export default class FadeInView extends React.Component {
  state = {
    callbackConfirm: null,
    callbackCancel: null
  }

  btnCancel = () => {
    this.state.callbackCancel && this.state.callbackCancel()
  }
  btnConfirm = () => {
    this.state.callbackConfirm && this.state.callbackConfirm()
  }

  render() {
    let { show, success, fail, type, cancelText, confirmText, title } = this.props
    typeof show === 'boolean' ? null : show = false
    success ? this.state.callbackConfirm = success : null
    fail ? this.state.callbackCancel = fail : null
    typeof cancelText === 'string' ? null : cancelText = '取消'
    typeof confirmText === 'string' ? null : confirmText = '确认'
    typeof title === 'string' ? null : title = '提示'
    return (
      <View>
        <Modal
          animationType="fade"
          transparent={true}
          visible={show}
          onRequestClose={() => { this.btnCancel() }}>
          <View style={styles.container}>
            <View style={styles.bodyView}>
              <View style={styles.bodyContentView}>
                <View style={styles.bodyContentTitleView}>
                  <Text style={styles.bodyContentTitle}>{title}</Text>
                </View>
                <View style={[
                  styles.bodyContentTitleView,
                  styles.bodyContentChildrenView
                ]}>
                  {this.props.children}
                </View>
              </View>
              <View style={styles.btn}>
                {
                  type == 'confirm'
                    ? <TouchableOpacity
                      style={[
                        styles.btnView,
                        styles.cancelView
                      ]}
                      activeOpacity={1}
                      onPress={() => this.btnCancel()}>
                      <Text style={styles.cancelText}>{cancelText}</Text>
                    </TouchableOpacity>
                    : null
                }
                <TouchableOpacity
                  style={{
                    ...styles.btnView,
                    ...styles.confirmView,
                    backgroundColor: type == 'confirm' ? '#da2c2c' : '#fff',
                    borderBottomLeftRadius: type == 'confirm' ? 0 : 5
                  }}
                  activeOpacity={1}
                  onPress={() => this.btnConfirm()}>
                  <Text style={{
                    ...styles.confirmText,
                    color: type == 'confirm' ? '#fff' : '#333'
                  }}>{confirmText}</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

样式文件

import { StyleSheet } from 'react-native';

export default styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,.3)',
    zIndex: 97,
  },
  bodyView: {
    flex: 1,
    backgroundColor: '#fff',
    height: 'auto',
    marginLeft: 50,
    marginRight: 50,
    zIndex: 88,
    borderRadius: 5,
  },
  bodyContentView: {
    padding: 20
  },
  bodyContentTitleView: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  },
  bodyContentTitle: {
    color: '#333',
    fontSize: 16
  },
  bodyContentChildrenView:{
    paddingTop:20,
    paddingBottom:20
  },
  btn: {
    borderTopWidth: .5,
    borderTopColor: '#ccc',
    flexDirection: 'row',
    alignItems: 'center',
  },
  btnView: {
    flex: 1,
    height: 40,
    justifyContent: 'center',
    borderBottomRightRadius: 5
  },
  confirmView: {
    borderBottomRightRadius: 5
  },
  confirmText: {
    textAlign: 'center'
  },
  cancelView: {
    backgroundColor: '#fff',
    borderBottomLeftRadius: 5
  },
  cancelText: {
    textAlign: 'center',
    color: '#333'
  }
})

使用方法

import React, { Component } from 'react';
import {
  Text,
  View
  ScrollView
} from 'react-native';
import Confirm from '@/components/confirm';

// 测试
class PersonalCenter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    }
  }


  // 退出登录
  _success=  () => {
    // 事件处理
  }

  render() {
    return (
      <ScrollView style={{flex:1}} >
        <Text onPress={() =>this.setState({ show: true })}>
            退出登录
            </Text>
        {/* 确认框 */}
        <Confirm
          show={this.state.show}
          type="confirm"
          success={() => this._success()}
          fail={() => this.setState({ show: false })}>
          <View>
            <Text>是否要退出登录？</Text>
          </View>
        </Confirm>
      </ScrollView>
    );
  }
}

export default Home;

效果