react-native Modal使用

import React, {Component} from 'react';

import {
  Modal,
  Text,
  Image,
  TouchableHighlight,
  View,
  StyleSheet,
  ScrollView,
  TouchableOpacity
} from 'react-native';


var width = require("Dimensions").get('window').width;
var height = require("Dimensions").get('window').height;


export default class ModalExample extends Component {


  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false
    };
  }


  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }


  render() {
    return (
      <View style={styles.container}>


        <Modal animationType={"slide"} transparent={true} //false弹出整页/true弹出浮出窗口
          visible={this.state.modalVisible} onRequestClose={() => {
          alert("Modal has been closed.")
        }}>
          <View style={styles.tView}>
            <View style={styles.Viewone}>
              <View style={styles.ttextView}>
                <Text style={styles.text}>请选择</Text>
              </View>


              <TouchableHighlight onPress={() => {
                this.setModalVisible(!this.state.modalVisible)
              }} style={styles.textView}>
                <Text style={styles.text}>打开相机</Text>


              </TouchableHighlight>


              <TouchableHighlight onPress={() => {
                this.setModalVisible(!this.state.modalVisible)
              }} style={styles.textView}>
                <Text style={styles.text}>打开相册</Text>


              </TouchableHighlight>


              <TouchableHighlight onPress={() => {
                this.setModalVisible(!this.state.modalVisible)
              }} style={styles.textView}>
                <Text style={styles.text}>取消</Text>


              </TouchableHighlight>


            </View>
          </View>
        </Modal>


        <ScrollView>
          <View style={styles.photoView}>
            <TouchableOpacity style={styles.imageView} onPress={() => {
              this.setModalVisible(true)
            }}>
              <View style={styles.ImageView}>
                <Image source={require('../image/sczp.png')} style={styles.Image}/>
              </View>
              <Text style={styles.photoTxte}>上传照片</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>


      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff', //#F0F0F0
  },
  tView: {
    width: width,
    height: 300,
    marginTop: 200,
    backgroundColor: "#999"
  },
  Viewone: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  ttextView: {
    marginBottom: 30
  },
  text: {
    fontSize: 20
  },
  textView: {
    width: width*0.6,
    height: 60,
    borderTopWidth: 1,
    borderColor: "#999",
    borderStyle: "solid",
    alignItems: "center",
    justifyContent: "center"
  },
  //相册整块View
  photo: {
    flexDirection: "row",
    flexWrap: "wrap",
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "space-between", //space-around
  },
  //相册单个View
  photoView: {
    marginBottom: 1,
    backgroundColor: "#F0F0F0"
  },
  imageView: {
    width: width*0.994 / 3,
    height: 120,
    borderColor: "#999",
    borderStyle: "dashed", //solid-dashed-dotted
    borderWidth: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  //相册图片
  photoImage: {
    width: width*0.994 / 3,
    height: 120,
    alignItems: "center",
    justifyContent: "center"
  },
  ImageView: {
    width: 60,
    height: 60,
    borderRadius: 5,
    alignItems: "center",
  },
  //上传照片图片
  Image: {
    width: 50,
    height: 50,
    borderRadius: 5,
    alignItems: "center",
    justifyContent: "center"
  },
  //上传照片文字
  photoTxte: {
    color: "#999",
    fontSize: 12
  }
});