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';
import ModalView from '../utils/ModalUtil';

type Props = {};
const options = {};
export default class ChosePhoto extends Component<Props> {
	state = {
		modalVisible: false
	};

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

	render() {
		return (
			<ModalView
				close={() => {
					this.setState({ modalVisible: false });
				}}
				visible={this.state.modalVisible}
				customerlayout={{ flex: 1, justifyContent: 'flex-end' }}
				contentView={this.getView}
			/>
		);
	}

	getView = () => {
		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,
							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',
							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);
		});
	}
}