1.修改个人中心界面（修改昵称，修改学校）

2.修改个人中心界面修改信息弹窗

pages/components/PersonalInfo.js

@@ -30,16 +30,19 @@ import PersonalInfoDialog from "./PersonalInfoDialog";
 type Props = {};
 export default class PersonalInfo extends BasePage {
   state = {
-    modalVisible: false
+    nickName: "初始昵称",
+    schoolName: "未设置"
   };
-
-  setModalVisible(visible) {
-    this.setState({ modalVisible: visible });
+  updateState(data) {
+    this.setState(data);
   }
   render() {
     return (
       <View style={{ flex: 1 }}>
-        <PersonalInfoDialog ref={view => (this.dialog = view)} />
+        <PersonalInfoDialog
+          ref={view => (this.dialog = view)}
+          updateParentState={this.updateState.bind(this)}
+        />
         <StatusBar
           backgroundColor={"transparent"}
           barStyle={"dark-content"}
@@ -70,7 +73,7 @@ export default class PersonalInfo extends BasePage {
                 backPress={() => this.goBack()}
                 lefttype={2}
                 textcolor={"white"}
-                backPress={() => alert("点击左侧")}
+                backPress={() => this.goBack()}
               />
             </View>
 
@@ -252,7 +255,7 @@ export default class PersonalInfo extends BasePage {
             {this.choseheadericon(1)}
           </View>
 
-          <Text style={styles.item_text}>昵称</Text>
+          <Text style={styles.item_text}>{this.state.nickName}</Text>
           <View
             style={{
               flex: 2,
@@ -335,7 +338,7 @@ export default class PersonalInfo extends BasePage {
             {this.choseheadericon(4)}
           </View>
 
-          <Text style={styles.item_text}>我的学校</Text>
+          <Text style={styles.item_text}>{this.state.schoolName}</Text>
           <View
             style={{
               flex: 2,
@@ -436,7 +439,8 @@ export default class PersonalInfo extends BasePage {
         alert("点击头像");
         break;
       case 1:
-        this.modalDialog();
+        this.dialog.setInfo("修改昵称", "昵称");
+        this.dialog.setModalVisible(true, 1);
         break;
       case 2:
         alert("生日");
@@ -445,7 +449,8 @@ export default class PersonalInfo extends BasePage {
         alert("所在地区");
         break;
       case 4:
-        alert("我的学校");
+        this.dialog.setInfo("我的学校", "学校名称");
+        this.dialog.setModalVisible(true, 2);
         break;
       case 5:
         alert("我的年级");
@@ -456,10 +461,6 @@ export default class PersonalInfo extends BasePage {
   logout() {
     alert("点击退出了");
   }
-
-  modalDialog() {
-    this.dialog.setModalVisible(true);
-  }
 }
 
 const styles = StyleSheet.create({

pages/components/PersonalInfoDialog.js

@@ -26,12 +26,62 @@ import {
 type Props = {};
 export default class PersonalInfoDialog extends Component<Props> {
   state = {
-    modalVisible: false
+    modalVisible: false,
+    title: "title",
+    placeholder: "",
+    touchcolor: "white",
+    touchtextcolor: "#58A8FA",
+    touch_cancel_color: "white",
+    touch_cancel_textcolor: "#58A8FA",
+    input_text: "",
+    updateType: 0 //1修改昵称,2修改学校名称
   };
 
-  setModalVisible(visible) {
-    this.setState({ modalVisible: visible });
+  setModalVisible(visible, type) {
+    this.setState({ modalVisible: visible, updateType: type });
   }
+  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() {
+    let data;
+    if (this.state.updateType == 1) {
+      data = { nickName: this.state.input_text };
+    } else if (this.state.updateType == 2) {
+      data = { schoolName: this.state.input_text };
+    }
+    this.props.updateParentState(data);
+    this.setModalVisible(false);
+  }
+
   render() {
     return (
       <Modal
@@ -76,8 +126,15 @@ export default class PersonalInfoDialog extends Component<Props> {
                   justifyContent: "center"
                 }}
               >
-                <Text style={{ flex: 1, textAlignVertical: "center" }}>
-                  修改昵称
+                <Text
+                  style={{
+                    flex: 1,
+                    textAlignVertical: "center",
+                    fontSize: 25,
+                    color: "black"
+                  }}
+                >
+                  {this.state.title}
                 </Text>
               </View>
               <View
@@ -88,19 +145,90 @@ export default class PersonalInfoDialog extends Component<Props> {
                 }}
               >
                 <TextInput
-                  placeholder="昵称"
+                  placeholder={this.state.placeholder}
                   editable={true} //是否可编辑
                   style={{
                     width: "90%",
                     height: "90%",
                     borderColor: "black",
                     borderWidth: 0,
-                    marginLeft: 5
+                    marginLeft: 5,
+                    fontSize: 20
+                  }}
+                  onChangeText={text => this.setState({ input_text: text })}
+                />
+              </View>
+              <View
+                style={{
+                  flex: 0.8,
+                  flexDirection: "row",
+                  alignItems: "center"
+                }}
+              >
+                <View
+                  style={{
+                    flex: 4
                   }}
-                  //    onChangeText={this._onChangeText} //输入框改变触发的函数
                 />
+                <View
+                  style={{
+                    flex: 2,
+                    backgroundColor: this.state.touchcolor,
+                    height: "100%",
+                    borderRadius: 30
+                  }}
+                >
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    onPressIn={() => this.touchDown()}
+                    onPressOut={() => this.touchUp()}
+                    onPress={() => {
+                      this.setParentState();
+                    }}
+                  >
+                    <Text
+                      style={{
+                        textAlignVertical: "center",
+                        textAlign: "center",
+                        fontSize: 25,
+                        borderRadius: 30,
+                        color: this.state.touchtextcolor
+                      }}
+                    >
+                      确定
+                    </Text>
+                  </TouchableOpacity>
+                </View>
+                <View style={{ flex: 0.5 }} />
+                <View
+                  style={{
+                    flex: 2,
+                    backgroundColor: this.state.touch_cancel_color,
+                    height: "100%",
+                    borderRadius: 30
+                  }}
+                >
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    onPressIn={() => this.touchCancelDown()}
+                    onPressOut={() => this.touchCancelUp()}
+                    onPress={() => this.setModalVisible(false)}
+                  >
+                    <Text
+                      style={{
+                        textAlignVertical: "center",
+                        textAlign: "center",
+                        fontSize: 25,
+                        color: this.state.touch_cancel_textcolor
+                      }}
+                    >
+                      取消
+                    </Text>
+                  </TouchableOpacity>
+                </View>
+                <View style={{ flex: 0.5 }} />
               </View>
-              <View style={{ flex: 1, backgroundColor: "blue" }} />
+              <View style={{ flex: 0.2 }} />
             </View>
           </View>
         </View>