美文网首页
react native confirm组件,alert组件

react native confirm组件,alert组件

作者: smallzip | 来源:发表于2019-08-15 11:42 被阅读0次
    // 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;
    

    效果

    confirm效果

    相关文章

      网友评论

          本文标题:react native confirm组件,alert组件

          本文链接:https://www.haomeiwen.com/subject/bfoajctx.html