efunbox-mobile-8/pages/components/ChosePhoto.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ImageBackground,
  TextInput,
  Button,
  StatusBar,
  Modal,
  TouchableHighlight,
  DeviceEventEmitter
} from "react-native";
import ImagePicker from "react-native-image-picker";
type Props = {};
const options = {};
export default class ChosePhoto extends Component<Props> {
  state = {
    modalVisible: false
  };

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

  render() {
    return (
      <Modal
        animationType="slide"
        transparent={true}
        visible={this.state.modalVisible}
        onRequestClose={() => {
          this.setState({ modalVisible: false });
        }}
      >
        <View
          style={{
            flex: 1,
            flexDirection: "column"
          }}
        >
          <TouchableOpacity
            style={{
              flex: 2.5,
              backgroundColor: "rgba(0, 0, 0, 0.5)",
              width: "100%"
            }}
            activeOpacity={1}
            onPress={() => this.setState({ modalVisible: false })}
          >
            <View
              style={{
                flex: 2,
                width: "100%"
              }}
            />
          </TouchableOpacity>
          <View
            style={{
              flex: 1,
              width: "100%",
              flexDirection: "column",
              alignItems: "center",
              backgroundColor: "rgba(0, 0, 0, 0.5)",
              justifyContent: "center"
            }}
          >
            <View
              style={{
                flex: 2,
                width: "90%",
                backgroundColor: "white",
                borderRadius: 20,
                flexDirection: "column"
              }}
            >
              <TouchableOpacity
                style={{
                  flex: 5,
                  alignItems: "center",
                  justifyContent: "center"
                }}
                activeOpacity={1}
                onPress={this.photograph.bind(this)}
              >
                <View
                  style={{
                    flex: 1,
                    alignItems: "center",
                    justifyContent: "center"
                  }}
                >
                  <Text
                    style={{ fontSize: 22, color: "rgba(88, 168, 250, 1)" }}
                  >
                    拍照
                  </Text>
                </View>
              </TouchableOpacity>
              <View
                style={{
                  flex: 0.1,
                  backgroundColor: "rgba(246, 247, 248, 1)"
                }}
              />
              <TouchableOpacity
                style={{
                  flex: 5,
                  alignItems: "center",
                  justifyContent: "center"
                }}
                activeOpacity={1}
                onPress={this.album_selection.bind(this)}
              >
                <View
                  style={{
                    flex: 1,
                    alignItems: "center",
                    justifyContent: "center"
                  }}
                >
                  <Text
                    style={{ fontSize: 22, color: "rgba(88, 168, 250, 1)" }}
                  >
                    从相册选择
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
            <View
              style={{
                flex: 0.1,
                width: "100%"
              }}
            />
            <TouchableOpacity
              style={{
                flex: 1,
                width: "90%",
                alignItems: "center",
                justifyContent: "center",
                borderRadius: 20,
                backgroundColor: "white"
              }}
              activeOpacity={1}
              onPress={() => {
                this.setState({ modalVisible: false });
              }}
            >
              <View
                style={{
                  flex: 1,
                  alignItems: "center",
                  justifyContent: "center",
                  borderRadius: 20,
                  backgroundColor: "white"
                }}
              >
                <Text
                  style={{
                    //   fontWeight: "bold",
                    fontSize: 22,
                    color: "rgba(88, 168, 250, 1)"
                  }}
                >
                  取消
                </Text>
              </View>
            </TouchableOpacity>
            <View
              style={{
                flex: 0.1,
                width: "100%"
              }}
            />
          </View>
        </View>
      </Modal>
    );
  }
  photograph() {
    this.setModalVisible(false);
    //拍照
    ImagePicker.launchCamera(options, response => {
      if (response.error) {
        alert("ImagePicker Error: " + response.error);
      }
      this.props.photoback(response.uri);
    });
  }

  album_selection() {
    this.setModalVisible(false);
    //打开系统相册
    ImagePicker.launchImageLibrary(options, response => {
      if (response.error) {
        alert("ImagePicker Error: " + response.error);
      }
      this.props.photoback(response.uri);
    });
  }
}