1，修改（修改昵称，学校）组件

pages/components/PersonalInfo.js

@@ -34,7 +34,6 @@ import PersonalInfoDialog from "./PersonalInfoDialog";
 type Props = {};
 export default class PersonalInfo extends BasePage {
   state = {
-    updateNS_show: false,
     nickName: "初始昵称",
     schoolName: "未设置",
     cisys: "北京市",
@@ -45,10 +44,16 @@ export default class PersonalInfo extends BasePage {
     birthday_day: 0,
     birthday_time: 0
   };
-
+  updateState(data) {
+    this.setState(data);
+  }
   render() {
     return (
       <View style={{ flex: 1 }}>
+        <PersonalInfoDialog
+          ref={view => (this.dialog = view)}
+          updateParentState={this.updateState.bind(this)}
+        />
         <ChosePhoto ref={view => (this.chosephoto = view)} />
         <RegionModal
           ref={view => (this.regionmodal = view)}
@@ -517,11 +522,6 @@ export default class PersonalInfo extends BasePage {
             <View style={{ flex: 0.8 }} />
           </View>
         </View>
-        <PersonalInfoDialog
-          ref={view => (this.dialog = view)}
-          updateNS_show={this.state.updateNS_show}
-          updateParentState={this.updateState.bind(this)}
-        />
       </View>
     );
   }
@@ -605,9 +605,6 @@ export default class PersonalInfo extends BasePage {
         this.chosephoto.setModalVisible(true);
         break;
       case 1:
-        this.setState({
-          updateNS_show: true
-        });
         this.dialog.setInfo("修改昵称", "昵称");
         this.dialog.setModalVisible(true, 1);
         break;
@@ -619,9 +616,6 @@ export default class PersonalInfo extends BasePage {
         this.regionmodal.setModalVisible(true);
         break;
       case 4:
-        this.setState({
-          updateNS_show: true
-        });
         this.dialog.setInfo("我的学校", "学校名称");
         this.dialog.setModalVisible(true, 2);
         break;
@@ -634,9 +628,6 @@ export default class PersonalInfo extends BasePage {
   logout() {
     alert("点击退出了");
   }
-  updateState(data) {
-    this.setState(data);
-  }
 
   cityscommit(provinces_name, citys_name) {
     this.setState({

pages/components/PersonalInfoDialog.js

@@ -50,10 +50,6 @@ export default class PersonalInfoDialog extends Component<Props> {
       placeholder: holder
     });
   }
-  cancel() {
-    let data = { updateNS_show: false };
-    this.props.updateParentState(data);
-  }
 
   touchDown() {
     this.setState({
@@ -79,36 +75,41 @@ export default class PersonalInfoDialog extends Component<Props> {
       touch_cancel_textcolor: "#58A8FA"
     });
   }
-  setParentState(bool) {
+  setParentState() {
     let data;
     if (this.state.updateType == 1) {
-      data = { nickName: this.state.input_text, updateNS_show: bool };
+      data = { nickName: this.state.input_text };
     } else if (this.state.updateType == 2) {
-      data = { schoolName: this.state.input_text, updateNS_show: bool };
+      data = { schoolName: this.state.input_text };
     }
     this.props.updateParentState(data);
+    this.setModalVisible(false);
   }
 
   render() {
-    if (this.props.updateNS_show) {
-      return (
+    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",
-            position: "absolute"
+            flexDirection: "column",
+            justifyContent: "flex-end"
           }}
         >
           <View
             style={{
-              flex: 111,
-              alignItems: "center",
-              justifyContent: "center",
+              width: "100%",
+              height: "20%",
               backgroundColor: "white"
             }}
           >
@@ -116,7 +117,6 @@ export default class PersonalInfoDialog extends Component<Props> {
               style={{
                 height: 150,
                 width: "100%",
-
                 backgroundColor: "white"
               }}
             >
@@ -184,7 +184,7 @@ export default class PersonalInfoDialog extends Component<Props> {
                     onPressIn={() => this.touchDown()}
                     onPressOut={() => this.touchUp()}
                     onPress={() => {
-                      this.setParentState(false);
+                      this.setParentState();
                     }}
                   >
                     <Text
@@ -213,7 +213,7 @@ export default class PersonalInfoDialog extends Component<Props> {
                     activeOpacity={1}
                     onPressIn={() => this.touchCancelDown()}
                     onPressOut={() => this.touchCancelUp()}
-                    onPress={() => this.cancel()}
+                    onPress={() => this.setModalVisible(false)}
                   >
                     <Text
                       style={{
@@ -233,9 +233,7 @@ export default class PersonalInfoDialog extends Component<Props> {
             </View>
           </View>
         </View>
-      );
-    } else {
-      return null;
-    }
+      </Modal>
+    );
   }
 }