Browse Source

1.修改个人信息界面(修改昵称,修改学校)从modal变为组件

zhangmengjie 5 years ago
parent
commit
216e712209
2 changed files with 33 additions and 25 deletions
  1. 16 7
      pages/components/PersonalInfo.js
  2. 17 18
      pages/components/PersonalInfoDialog.js

+ 16 - 7
pages/components/PersonalInfo.js

@@ -34,6 +34,7 @@ import PersonalInfoDialog from "./PersonalInfoDialog";
 type Props = {};
 export default class PersonalInfo extends BasePage {
   state = {
+    updateNS_show: false,
     nickName: "初始昵称",
     schoolName: "未设置",
     cisys: "北京市",
@@ -44,16 +45,10 @@ 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)}
@@ -522,6 +517,11 @@ 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,6 +605,9 @@ 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;
@@ -616,6 +619,9 @@ 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;
@@ -628,6 +634,9 @@ export default class PersonalInfo extends BasePage {
   logout() {
     alert("点击退出了");
   }
+  updateState(data) {
+    this.setState(data);
+  }
 
   cityscommit(provinces_name, citys_name) {
     this.setState({

+ 17 - 18
pages/components/PersonalInfoDialog.js

@@ -50,6 +50,10 @@ export default class PersonalInfoDialog extends Component<Props> {
       placeholder: holder
     });
   }
+  cancel() {
+    let data = { updateNS_show: false };
+    this.props.updateParentState(data);
+  }
 
   touchDown() {
     this.setState({
@@ -75,27 +79,19 @@ export default class PersonalInfoDialog extends Component<Props> {
       touch_cancel_textcolor: "#58A8FA"
     });
   }
-  setParentState() {
+  setParentState(bool) {
     let data;
     if (this.state.updateType == 1) {
-      data = { nickName: this.state.input_text };
+      data = { nickName: this.state.input_text, updateNS_show: bool };
     } else if (this.state.updateType == 2) {
-      data = { schoolName: this.state.input_text };
+      data = { schoolName: this.state.input_text, updateNS_show: bool };
     }
     this.props.updateParentState(data);
-    this.setModalVisible(false);
   }
 
   render() {
-    return (
-      <Modal
-        animationType="fade"
-        transparent={true}
-        visible={this.state.modalVisible}
-        onRequestClose={() => {
-          this.setState({ modalVisible: false });
-        }}
-      >
+    if (this.props.updateNS_show) {
+      return (
         <View
           style={{
             flex: 1,
@@ -104,7 +100,8 @@ export default class PersonalInfoDialog extends Component<Props> {
             alignItems: "center",
             justifyContent: "center",
             backgroundColor: "rgba(0, 0, 0, 0.3)",
-            flexDirection: "row"
+            flexDirection: "row",
+            position: "absolute"
           }}
         >
           <View
@@ -187,7 +184,7 @@ export default class PersonalInfoDialog extends Component<Props> {
                     onPressIn={() => this.touchDown()}
                     onPressOut={() => this.touchUp()}
                     onPress={() => {
-                      this.setParentState();
+                      this.setParentState(false);
                     }}
                   >
                     <Text
@@ -216,7 +213,7 @@ export default class PersonalInfoDialog extends Component<Props> {
                     activeOpacity={1}
                     onPressIn={() => this.touchCancelDown()}
                     onPressOut={() => this.touchCancelUp()}
-                    onPress={() => this.setModalVisible(false)}
+                    onPress={() => this.cancel()}
                   >
                     <Text
                       style={{
@@ -236,7 +233,9 @@ export default class PersonalInfoDialog extends Component<Props> {
             </View>
           </View>
         </View>
-      </Modal>
-    );
+      );
+    } else {
+      return null;
+    }
   }
 }