可修改个人信息

@@ -5,6 +5,7 @@ import {
   Text,
   View,
   ScrollView,
+  TextInput,
   TouchableOpacity,
   TouchableHighlight,
   Image,
@@ -15,22 +16,43 @@ export default class PersonalInfo extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      modalVisible: false
+      modalVisible: false,
+      title: "更改昵称",
+      type: "name",
+      text: "",
+      name: this.props.name,
+      identity: this.props.identity,
     };
   }
 
-  setModalVisible(visible) {
+  setModalVisible(visible,type) {
     this.setState({ modalVisible: visible });
+    this.setState({
+      type: type,
+      title: type == "name" ? "更改昵称" : "更改职业"
+    })
+  }
+  confirmChange() {
+    console.log("看看拿到方法没",this);
+    if (this.state.type == "name") {
+      this.setState({name: this.state.text})
+    } else {
+      this.setState({identity: this.state.text})
+    }
+    this.setState({ 
+      modalVisible: false,
+     });
+    //  修改mine组件的属性值，该方法是从mine组件传过来的
+    this.props.changeInfo(this.state.type,this.state.text);
   }
-
   render() {
-    const { name, identity } = this.props;
+    const { name, identity } = this.state;
     return (
       <View style={styles.container}>
         <TouchableOpacity
           style={styles.itemContainer}
           onPress={() => {
-            this.setModalVisible(true);
+            this.setModalVisible(true,"name");
           }}
         >
           <Text style={styles.itemLeft}>昵称</Text>
@@ -45,7 +67,7 @@ export default class PersonalInfo extends Component {
         <TouchableOpacity
           style={styles.itemContainer}
           onPress={() => {
-            this.setModalVisible(true);
+            this.setModalVisible(true,"identity");
           }}
         >
           <Text style={styles.itemLeft}>职业</Text>
@@ -58,26 +80,46 @@ export default class PersonalInfo extends Component {
           </View>
         </TouchableOpacity>
 
+        {/* 弹出框 */}
         <Modal
           animationType={"slide"}
-          transparent={false}
+          transparent={true}
           visible={this.state.modalVisible}
-          onRequestClose={() => {
-            alert("Modal has been closed.");
-          }}
         >
-          <View style={{ marginTop: 22 }}>
-            <View>
-              <Text>Hello World!</Text>
+          <View style={styles.modalConatier}>
+            <View style={styles.modalWrapper}>
+              <Text style={styles.title}>{this.state.title}</Text>
+              <TextInput
+                style={styles.textInput}
+                autoFocus={true}
+                value={this.state.text}
+                onChangeText={ text => this.setState({ text })}
+                selectionColor="#0076FF"
+                clearTextOnFocus={true}
+                numberOfLines={1}
+                clearButtonMode="always"
+                keyboardType="default"
+              />
+              <View style={styles.btns}>
                 <TouchableOpacity
+                  style={styles.btn}
                   onPress={() => {
                     this.setModalVisible(!this.state.modalVisible);
                   }}
                 >
-                <Text>Hide Modal</Text>
+                  <Text style={styles.btnText}>取消</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={styles.btn}
+                  onPress={() => {
+                    this.confirmChange()
+                  }}
+                >
+                  <Text style={styles.btnText}>确定</Text>
                 </TouchableOpacity>
               </View>
             </View>
+          </View>
         </Modal>
       </View>
     );
@@ -119,5 +161,61 @@ const styles = StyleSheet.create({
   itemArrow: {
     width: 14,
     height: 14
+  },
+  modalConatier: {
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  modalWrapper: {
+    width: 270,
+    height: 180,
+    borderRadius: 10,
+    backgroundColor: "white",
+    // paddingLeft: 20,
+    // paddingRight: 20,
+    paddingBottom: 10,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 17,
+    color: "#030303",
+    marginLeft: 20,
+    position: "absolute",
+    top: 38,
+    left: 20
+  },
+  textInput: {
+    marginTop: 20,
+    marginLeft: 20,
+    marginRight: 20,
+    width: 150,
+    borderStyle: "solid",
+    borderColor: "#ccc",
+    borderBottomWidth: 0.5,
+  },
+  btns: {
+    position: "absolute",
+    bottom: 0,
+    height: 44,
+    flexDirection: "row",
+    borderStyle: "solid",
+    borderColor: "#ccc",
+    borderTopWidth: 0.5,
+  },
+  btn: {
+    width: 135,
+    height: 44,
+    justifyContent: "center",
+    alignItems: "center",
+    borderStyle: "solid",
+    borderColor: "#ccc",
+    borderLeftWidth: 0.5,
+  },
+  btnText: {
+    color: "#0076FF",
+    fontSize: 17,
   }
 });

@@ -29,7 +29,8 @@ export default class Mine extends Component {
               component: PersonalInfo,
               passProps: {
                 name: this.state.name,
-                identity: this.state.identity
+                identity: this.state.identity,
+                changeInfo: (type,text) => this.changeInfo(type,text),
               }
             });
           }}
@@ -108,6 +109,17 @@ export default class Mine extends Component {
     console.log("看看this是什么", this);
     this.props.onLogin(false);
   }
+  changeInfo(type,text) {
+    if (type == "name") {
+      this.setState({
+        name: text
+      })
+    } else {
+      this.setState({
+        identity: text
+      })
+    }
+  }
 }
 
 class BarList extends Component {