efunbox-mobile-8/pages/components/PersonalInfoDialog.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,
	Keyboard,
	Button,
	StatusBar,
	Modal,
	TouchableHighlight,
	DeviceEventEmitter
} from 'react-native';
import ModalView from '../utils/ModalUtil';

type Props = {};
export default class PersonalInfoDialog extends Component<Props> {
	state = {
		modalVisible: false,
		title: 'title',
		placeholder: '',
		touchcolor: 'white',
		touchtextcolor: '#58A8FA',
		touch_cancel_color: 'white',
		touch_cancel_textcolor: '#58A8FA',
		input_text: '',
		updateType: 0, //1修改昵称,2修改学校名称,
		keyBoardHeight: 0
	};

	setModalVisible(visible, type) {
		this.setState({
			modalVisible: visible,
			updateType: type,
			input_text: ''
		});
	}
	setInfo(mytitle, holder) {
		this.setState({
			title: mytitle,
			placeholder: holder
		});
	}

	touchDown() {
		this.setState({
			touchcolor: '#58A8FA',
			touchtextcolor: 'white'
		});
	}
	touchUp() {
		this.setState({
			touchcolor: 'white',
			touchtextcolor: '#58A8FA'
		});
	}
	touchCancelDown() {
		this.setState({
			touch_cancel_color: '#58A8FA',
			touch_cancel_textcolor: 'white'
		});
	}
	touchCancelUp() {
		this.setState({
			touch_cancel_color: 'white',
			touch_cancel_textcolor: '#58A8FA'
		});
	}
	setParentState() {
		this.props.updateParentState(this.state.input_text, this.state.updateType);
		this.setModalVisible(false);
	}
	componentWillMount() {
		this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
		this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
	}

	componentWillUnmount() {
		this.keyboardDidShowListener.remove();
		this.keyboardDidHideListener.remove();
	}

	_keyboardDidShow = (e) => {
		this.setState({
			keyBoardHeight: 0
		});
	};
	_keyboardDidHide = () => {
		this.setState({
			keyBoardHeight: 0
		});
	};
	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,
						width: '100%',
						height: '100%',
						flexDirection: 'column',
						justifyContent: 'flex-end'
					}}
				>
					<View
						style={{
							width: '100%',
							height: 150,
							backgroundColor: 'white',
							bottom: this.state.keyBoardHeight
						}}
					>
						<View
							style={{
								height: '100%',
								width: '100%',
								backgroundColor: 'white'
							}}
						>
							<View
								style={{
									flex: 1,
									alignItems: 'center',
									justifyContent: 'center'
								}}
							>
								<Text
									style={{
										flex: 1,
										textAlignVertical: 'center',
										fontSize: 16,
										color: 'black'
									}}
								>
									{this.state.title}
								</Text>
							</View>
							<View
								style={{
									flex: 1,
									alignItems: 'center',
									justifyContent: 'center'
								}}
							>
								<TextInput
									placeholder={this.state.placeholder}
									editable={true} //是否可编辑
									autoFocus={true}
									style={{
										width: '90%',
										height: '90%',
										borderColor: 'black',
										borderWidth: 0,
										marginLeft: 5,
										fontSize: 16
									}}
									onChangeText={(text) =>
										this.setState({
											input_text: text
										})}
								/>
							</View>
							<View
								style={{
									flex: 0.8,
									flexDirection: 'row',
									alignItems: 'center'
								}}
							>
								<View
									style={{
										flex: 5
									}}
								/>
								<View
									style={{
										flex: 2,
										height: '100%',
										borderRadius: 30,
										backgroundColor: this.state.touchcolor,
										alignItems: 'center'
									}}
								>
									<TouchableOpacity
										activeOpacity={1}
										onPressIn={() => this.touchDown()}
										onPressOut={() => this.touchUp()}
										onPress={() => {
											this.setParentState();
										}}
									>
										<Text
											style={{
												height: '100%',
												width: '100%',
												textAlignVertical: 'center',
												textAlign: 'center',
												fontSize: 18,
												borderRadius: 30,
												color: this.state.touchtextcolor
											}}
										>
											确定
										</Text>
									</TouchableOpacity>
								</View>
								<View style={{ flex: 0.5 }} />
								<View
									style={{
										flex: 2,
										height: '100%',
										backgroundColor: this.state.touch_cancel_color,
										alignItems: 'center',
										borderRadius: 30
									}}
								>
									<TouchableOpacity
										activeOpacity={1}
										onPressIn={() => this.touchCancelDown()}
										onPressOut={() => this.touchCancelUp()}
										onPress={() => this.setModalVisible(false)}
									>
										<Text
											style={{
												textAlignVertical: 'center',
												textAlign: 'center',
												height: '100%',
												width: '100%',
												fontSize: 18,
												color: this.state.touch_cancel_textcolor
											}}
										>
											取消
										</Text>
									</TouchableOpacity>
								</View>
								<View style={{ flex: 0.5 }} />
							</View>
							<View style={{ flex: 0.2 }} />
						</View>
					</View>
				</View>
			</Modal>
		);
	};
}