rn-project/src/pages/modal.js

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

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';

import { SafeAreaView } from 'react-navigation';
import BaseStyle from '../constants/Style';
import Radio from '../components/radio';
import Btn from '../components/buttons';
import ModalDilog from '../components/dilogModal';
import ImageDilog from '../components/ImageDilog';

export default class RadioScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      DilogModal1: false,
      DilogModal2: false,
      DilogModal3: false,
      DilogModal4: false,
    };
  }

  cancel() {
    this.setState({
      DilogModal4: false,
    });
  }
  confirm(imageCode) {
    this.setState({
      DilogModal4: false,
    });
    toast(`你输入的验证码为：${imageCode}`);
  }

  changeImage() {
    alert('更换了图片');
  }

  render() {
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <ModalDilog
          DilogModal={this.state.DilogModal1}
          btnNum={1}
          btnOption={() =>
            this.setState({
              DilogModal1: false,
            })
          }
        />
        <ModalDilog
          DilogModal={this.state.DilogModal2}
          btnNum={2}
          leftOPtion={() =>
            this.setState({
              DilogModal2: false,
            })
          }
          rightOption={() => {
            this.setState({
              DilogModal2: false,
            });
            toast('点击了确定');
          }}
        />
        <ModalDilog
          DilogModal={this.state.DilogModal3}
          type={'easy'}
          leftOPtion={() =>
            this.setState({
              DilogModal3: false,
            })
          }
          rightOption={() => {
            this.setState({
              DilogModal3: false,
            });
            toast('点击了确定');
          }}
        />
        <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)}
        />
        <View style={styles.container}>
          <Btn
            text={'效果1'}
            btnStyle={{ backgroundColor: 'blue', borderRadius: 0 }}
            onPress={() => {
              this.setState({ DilogModal1: true });
            }}
          />
          <Btn
            text={'效果2'}
            btnStyle={{
              backgroundColor: 'red',
              borderRadius: 0,
              marginTop: 20,
            }}
            onPress={() => {
              this.setState({ DilogModal2: true });
            }}
          />
          <Btn
            text={'效果3'}
            btnStyle={{ borderRadius: 0, marginTop: 20 }}
            onPress={() => {
              this.setState({ DilogModal3: true });
            }}
          />

          <Btn
            text={'效果4'}
            btnStyle={{
              backgroundColor: 'green',
              borderRadius: 0,
              marginTop: 20,
            }}
            onPress={() => {
              this.setState({ DilogModal4: true });
            }}
          />
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#eee',
  },
  container: {
    ...BaseStyle.flex,
    paddingTop: 20,
  },
  radView: {
    marginTop: 20,
  },
});