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,
  Button,
  StatusBar,
  Modal,
  TouchableHighlight,
  DeviceEventEmitter
} from "react-native";

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

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }
  render() {
    return (
      <Modal
        animationType="fade"
        transparent={true}
        visible={this.state.modalVisible}
        onRequestClose={() => {
          this.setState({ modalVisible: false });
        }}
      >
        <View
          style={{
            flex: 1,
            width: "100%",
            height: "100%",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "rgba(0, 0, 0, 0.3)",
            flexDirection: "row"
          }}
        >
          <View
            style={{
              flex: 111,
              alignItems: "center",
              justifyContent: "center",
              backgroundColor: "white"
            }}
          >
            <View
              style={{
                height: 150,
                width: "100%",

                backgroundColor: "white"
              }}
            >
              <View
                style={{
                  flex: 1,
                  alignItems: "center",
                  justifyContent: "center"
                }}
              >
                <Text style={{ flex: 1, textAlignVertical: "center" }}>
                  修改昵称
                </Text>
              </View>
              <View
                style={{
                  flex: 1,
                  alignItems: "center",
                  justifyContent: "center"
                }}
              >
                <TextInput
                  placeholder="昵称"
                  editable={true} //是否可编辑
                  style={{
                    width: "90%",
                    height: "90%",
                    borderColor: "black",
                    borderWidth: 0,
                    marginLeft: 5
                  }}
                  //    onChangeText={this._onChangeText} //输入框改变触发的函数
                />
              </View>
              <View style={{ flex: 1, backgroundColor: "blue" }} />
            </View>
          </View>
        </View>
      </Modal>
    );
  }
}