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 (
      
         { this.btnCancel() }}>
          
            
              
                
                  {title}
                
                
                  {this.props.children}
                
              
              
                {
                  type == 'confirm'
                    ?  this.btnCancel()}>
                      {cancelText}
                    
                    : null
                }
                 this.btnConfirm()}>
                  {confirmText}
                
              
            
          
        
      
    );
  }
}

样式文件

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 (
      
        this.setState({ show: true })}>
            退出登录
            
        {/* 确认框 */}
         this._success()}
          fail={() => this.setState({ show: false })}>
          
            是否要退出登录？
          
        
      
    );
  }
}

export default Home;

效果

confirm效果