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";

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 (
      <Modal
        animationType="fade"
        transparent={true}
        visible={this.state.modalVisible}
        onRequestClose={() => {
          this.setState({ modalVisible: false });
        }}
      >
        <View
          style={{
            flex: 1,
            width: "100%",
            height: "100%",
            backgroundColor: "rgba(0, 0, 0, 0.3)",
            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>
    );
  }
}