rn-project/src/components/dilogModal.js

#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux

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

import BaseStyle from '../constants/Style';
import ViewUtil from '../utils/View';
/**
 * 使用方法
 * 
 *  <ModalDilog
          DilogModal={this.state.DilogModal3}
          type={'easy'}
          leftOPtion={() => this.setState({
            DilogModal3: false
          })}
          rightOption={() => {
            this.setState({
              DilogModal3: false
            })
            toast("点击了确定")
          }}
        />
 * 
 * */
export default class DilogModal extends Component {
  static defaultProps = {
    text: '确定要执行操作吗？',
    leftText: '取消',
    rightText: '确定',
    leftTextColor: '#0894ec',
    rightTextColor: '#0894ec',
    btnNum: '2',
    btnText: '确定',
    btnColor: '#ffb910',
    animationType: 'fade',
    type: '',
  };
  static propTypes = {
    DilogModal: PropTypes.bool,
    text: PropTypes.string,
    leftText: PropTypes.string,
    rightText: PropTypes.string,
    leftTextColor: PropTypes.string,
    rightTextColor: PropTypes.string,
    leftOPtion: PropTypes.func,
    rightOption: PropTypes.func,
    btnNum: PropTypes.string, //底部按钮数量
    btnText: PropTypes.string,
    btnColor: PropTypes.string,
    btnOption: PropTypes.func,
    animationType: PropTypes.string,
    type: PropTypes.string,
  };
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {}
  leftOPtion() {
    this.props.leftOPtion();
  }
  rightOption() {
    this.props.rightOption();
  }
  btnOption() {
    this.props.btnOption();
  }
  render() {
    const {
      DilogModal,
      text,
      leftText,
      rightText,
      leftTextColor,
      rightTextColor,
      btnNum,
      btnText,
      btnColor,
      btnOption,
      animationType,
      type,
    } = this.props;
    let LC = leftTextColor ? { color: leftTextColor } : null;
    let RC = rightTextColor ? { color: rightTextColor } : null;
    let BC = btnColor ? { color: btnColor } : null;
    return (
      <View>
        <Modal
          animationType={animationType}
          transparent={true}
          onRequestClose={() => {}}
          visible={DilogModal}>
          <View style={styles.modelView}>
            {type === 'easy' ? (
              <View style={styles.dilogView}>
                <View style={styles.titleTextEasyView}>
                  <Text style={[styles.topText]}>{text}</Text>
                </View>
                <View style={styles.buttonView}>
                  <TouchableOpacity
                    style={[styles.leftView, styles.lefteasy]}
                    onPress={() => {
                      this.leftOPtion();
                    }}>
                    <Text style={[styles.easytextcolor, LC]}>{leftText}</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={[styles.rightView, styles.righteasy]}
                    onPress={() => {
                      this.rightOption();
                    }}>
                    <Text style={[styles.easytextcolor, RC]}>{rightText}</Text>
                  </TouchableOpacity>
                </View>
              </View>
            ) : btnNum + '' === '2' ? ( //显示两个按钮 否则显示一个按钮
              <View style={styles.dilogMV}>
                <View style={styles.titleTextView}>
                  <Text style={styles.topText}>{text}</Text>
                </View>
                <View style={styles.buttonView}>
                  <TouchableOpacity
                    style={styles.leftView}
                    onPress={() => {
                      this.leftOPtion();
                    }}>
                    <Text style={[styles.leftText, LC]}>{leftText}</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles.rightView}
                    onPress={() => {
                      this.rightOption();
                    }}>
                    <Text style={[styles.rightText, RC]}>{rightText}</Text>
                  </TouchableOpacity>
                </View>
              </View>
            ) : (
              <View style={styles.dilogMV}>
                <View style={styles.titleTextView}>
                  <Text style={styles.topText}>{text}</Text>
                </View>
                <View style={styles.buttonView}>
                  <TouchableOpacity style={styles.btnView} onPress={btnOption}>
                    <Text style={[styles.btnText, BC]}>{btnText}</Text>
                  </TouchableOpacity>
                </View>
              </View>
            )}
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  modelView: {
    flex: 1,
    backgroundColor: 'rgba(40,40,40,0.6)',
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
  },
  dilogView: {
    backgroundColor: '#fff',
    width: ViewUtil.size.width - 80,
    height: 110,
    borderRadius: 10,
  },
  dilogMV: {
    backgroundColor: '#fff',
    width: ViewUtil.size.width - 60,
    height: 160,
    borderRadius: 5,
  },
  topText: {
    marginLeft: 10,
    marginRight: 10,
    fontSize: 15,
    lineHeight: 20,
    color: '#333333',
  },
  titleTextEasyView: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    marginTop: 5,
    flex: 1,
  },
  titleTextView: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    marginTop: 20,
    flex: 1,
  },

  buttonView: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentBetween,
    ...BaseStyle.alignItemsCenter,
    borderTopWidth: 1,
    borderTopColor: '#dddddd',
  },
  lefteasy: {
    paddingTop: 12,
    paddingBottom: 12,
  },
  leftView: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
    ...BaseStyle.justifyContentCenter,
    paddingTop: 20,
    paddingBottom: 20,
    flex: 1,
    borderRightWidth: 1,
    borderRightColor: '#dddddd',
    // backgroundColor:"red"
  },
  righteasy: {
    paddingTop: 12,
    paddingBottom: 12,
  },
  rightView: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
    ...BaseStyle.justifyContentCenter,
    paddingTop: 20,
    paddingBottom: 20,
    flex: 1,
  },
  easytextcolor: {
    fontSize: 16,
    color: '#0894ec',
  },
  leftText: {
    fontSize: 16,
    color: '#333333',
  },
  rightText: {
    fontSize: 16,
    color: '#ffb910',
  },
  btnView: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
    ...BaseStyle.justifyContentCenter,
    flex: 1,
    paddingBottom: 20,
    paddingTop: 20,
  },
  btnText: {
    fontSize: 17,
    color: '#ffb910',
  },
});