rn-project/src/components/ImageDilog.js

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

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

import BaseStyle from '../constants/Style';
/**
 * 使用方法
 * 
 * import ImageDilog from "../components/ImageDilog";
  cancel() {
    this.setState({
      DilogModal4: false,
    })
  }
  confirm(imageCode) {
    this.setState({
      DilogModal4: false,
    })
    toast(`你输入的验证码为：${imageCode}`)
  }

  changeImage() {
    alert("更换了图片")
  }
  
   <ImageDilog
          DilogModal={this.state.DilogModal4}
          ImageUrl={`https://upload-images.jianshu.io/upload_images/4731495-b73e581098232f28.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240`}
          cancel={this.cancel.bind(this)}
          confirm={this.confirm.bind(this)}
          changeImage={this.changeImage.bind(this)}
        />

 */
export default class ImageDilog extends Component {
  static propTypes = {
    DilogModal: PropTypes.bool,
    cancel: PropTypes.func,
    confirm: PropTypes.func,
    changeImage: PropTypes.func,
    base64Image: PropTypes.string,
    isBase64: PropTypes.bool,
    ImageUrl: PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.state = {
      imageCode: '',
    };
  }
  componentDidMount() {}
  cancel() {
    this.props.cancel();
  }
  confirm() {
    if (!this.state.imageCode) {
      Alert.alert('', '请输入图形验证码');
      return false;
    }
    this.props.confirm(this.state.imageCode);
  }
  changeImage() {
    this.props.changeImage();
  }
  render() {
    const { DilogModal, ImageUrl, isBase64 } = this.props;
    let baseImg = isBase64 ? `data:image/png;base64,${ImageUrl}` : ImageUrl;

    return (
      <View>
        <Modal
          onRequestClose={() => {}}
          animationType={'slide'}
          transparent={true}
          visible={DilogModal}>
          <View style={styles.modelView}>
            <View style={styles.dailogView}>
              <View style={styles.topView}>
                <Text style={styles.topText}>请输入图形验证码</Text>
                <TouchableOpacity
                  style={styles.imageTach}
                  onPress={() => {
                    this.cancel();
                  }}>
                  {/* <Image
                    style={styles.iamgeClose}
                    source={require('../images/login/close.png')}
                  /> */}
                </TouchableOpacity>
              </View>
              <View style={styles.inputView}>
                <TextInput
                  style={styles.textInputStyle}
                  underlineColorAndroid="transparent"
                  // keyboardType="numeric"
                  maxLength={6}
                  placeholder="请输入图形验证码"
                  placeholderTextColor="#cccccc"
                  onChangeText={text => this.setState({ imageCode: text })}
                  ref={c => {
                    this.imageCode = c;
                  }}
                />
                <TouchableOpacity
                  onPress={() => {
                    this.changeImage();
                  }}>
                  <Image style={styles.rightImage} source={{ uri: baseImg }} />
                </TouchableOpacity>
              </View>
              <View style={styles.bottomTach}>
                <TouchableOpacity
                  style={styles.tacItems}
                  onPress={() => {
                    this.cancel();
                  }}>
                  <Text style={styles.topText}>取消</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.tacItems}
                  onPress={() => {
                    this.confirm();
                  }}>
                  <Text style={[styles.topText, styles.right]}>确定</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  modelView: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    flex: 1,
    backgroundColor: 'rgba(40,40,40,0.6)',
  },
  dailogView: {
    marginBottom: 60,
    width: 280,
    height: 175,
    borderRadius: 10,
    backgroundColor: '#ffffff',
  },
  topView: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    marginTop: 20,
  },
  topText: {
    fontSize: 17,
    color: '#333333',
  },
  textInputStyle: {
    flex: 1,
    fontSize: 17,
    height: 40,
    padding: 0,
  },
  inputView: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
    marginTop: 22,
    marginBottom: 20,
    marginLeft: 20,
    marginRight: 20,
    paddingLeft: 10,
    width: 280 - 40,
    height: 40,
    borderBottomColor: '#fafafa',
    borderBottomWidth: 1,
    //  backgroundColor:"red"
  },
  rightImage: {
    width: 100,
    height: 40,
    resizeMode: 'stretch',
  },
  bottomTach: {
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    position: 'absolute',
    bottom: 20,
  },
  tacItems: {
    ...BaseStyle.justifyContentCenter,
    ...BaseStyle.alignItemsCenter,
    width: 280 / 2,
  },
  right: {
    color: '#ffb910',
  },
  imageTach: {
    position: 'absolute',
    right: 20,
    top: -6,
  },
  // iamgeClose: {
  //   width: 15,
  //   height: 15,
  // },
});