1.给修改昵称的框加上默认focus

2.头像选择

pages/components/ChosePhoto.js

@@ -22,8 +22,9 @@ import {
   TouchableHighlight,
   DeviceEventEmitter
 } from "react-native";
-
+import ImagePicker from "react-native-image-picker";
 type Props = {};
+const options = {};
 export default class ChosePhoto extends Component<Props> {
   state = {
     modalVisible: false
@@ -191,10 +192,22 @@ export default class ChosePhoto extends Component<Props> {
     );
   }
   photograph() {
-    alert("拍照");
+    //拍照
+    ImagePicker.launchCamera(options, response => {
+      if (response.error) {
+        alert("ImagePicker Error: " + response.error);
+      }
+      this.props.photoback(response.uri);
+    });
   }
 
   album_selection() {
-    alert("相册选择");
+    //打开系统相册
+    ImagePicker.launchImageLibrary(options, response => {
+      if (response.error) {
+        alert("ImagePicker Error: " + response.error);
+      }
+      this.props.photoback(response.uri);
+    });
   }
 }

pages/components/PersonalInfo.js

@@ -42,489 +42,492 @@ export default class PersonalInfo extends BasePage {
     birthday_year: 0,
     birthday_month: 0,
     birthday_day: 0,
-    birthday_time: 0
+    birthday_time: 0,
+    photo_uri: null
   };
   updateState(data) {
     this.setState(data);
   }
   render() {
     return (
-      <View style={{backgroundColor: '#F0F1F5', flex : 1}}>
-      <View style={{ width: "100%", height: this.getWindowHeight() }}>
-        <PersonalInfoDialog
-          ref={view => (this.dialog = view)}
-          updateParentState={this.updateState.bind(this)}
-        />
-        <ChosePhoto ref={view => (this.chosephoto = view)} />
-        <RegionModal
-          ref={view => (this.regionmodal = view)}
-          cityscommit={this.cityscommit.bind(this)}
-        />
-        <GradeSelectionModal
-          ref={view => (this.gradeselectionModal = view)}
-          commitGrade={this.commitGrade.bind(this)}
-          grade_index={this.state.grade_index}
-        />
-        <BirthdayModal
-          ref={view => (this.birthdaymodal = view)}
-          birthdaycommit={this.birthdaycommit.bind(this)}
-          year={this.state.birthday_year}
-          month={this.state.birthday_month}
-          day={this.state.birthday_day}
-        />
-        <StatusBar backgroundColor={"transparent"} translucent={true} />
+      <View style={{ backgroundColor: "#F0F1F5", flex: 1 }}>
+        <View style={{ width: "100%", height: this.getWindowHeight() }}>
+          <PersonalInfoDialog
+            ref={view => (this.dialog = view)}
+            updateParentState={this.updateState.bind(this)}
+          />
+          <ChosePhoto
+            ref={view => (this.chosephoto = view)}
+            photoback={this.photoback.bind(this)}
+          />
+          <RegionModal
+            ref={view => (this.regionmodal = view)}
+            cityscommit={this.cityscommit.bind(this)}
+          />
+          <GradeSelectionModal
+            ref={view => (this.gradeselectionModal = view)}
+            commitGrade={this.commitGrade.bind(this)}
+            grade_index={this.state.grade_index}
+          />
+          <BirthdayModal
+            ref={view => (this.birthdaymodal = view)}
+            birthdaycommit={this.birthdaycommit.bind(this)}
+            year={this.state.birthday_year}
+            month={this.state.birthday_month}
+            day={this.state.birthday_day}
+          />
+          <StatusBar backgroundColor={"transparent"} translucent={true} />
 
-        <View
-          style={{
-            flex: 1,
-            flexDirection: "column"
-          }}
-        >
-          <ImageBackground
-            source={require("../images/userInfo/top.png")}
+          <View
             style={{
-              flex: 2.8,
-              width: "100%",
-              backgroundColor: "#F0F1F5",
-              height: "75%"
+              flex: 1,
+              flexDirection: "column"
             }}
-            imageStyle={{ resizeMode: "cover" }}
           >
-            <View
+            <ImageBackground
+              source={require("../images/userInfo/top.png")}
               style={{
-                flex: 1,
-                alignItems: "center",
-                justifyContent: "center",
-                flexDirection: "column"
+                flex: 2.8,
+                width: "100%",
+                backgroundColor: "#F0F1F5",
+                height: "75%"
               }}
+              imageStyle={{ resizeMode: "cover" }}
             >
-              <CourseTitle
-                style={{ flex: 4 }}
-                width={this.getWindowWidth()}
-                title="个人信息"
-                backPress={() => this.goBack()}
-                lefttype={2}
-                righttype={0}
-                textcolor={"white"}
-                backPress={() => this.goBack()}
-              />
-
-              <TouchableOpacity
+              <View
                 style={{
                   flex: 1,
-                  backgroundColor: "white",
-                  width: "90%",
-                  bottom: 0,
                   alignItems: "center",
                   justifyContent: "center",
-                  borderRadius: 20,
-                  overflow: "hidden"
+                  flexDirection: "column"
                 }}
-                activeOpacity={1}
-                onPress={() => this.arrowpress(0)}
               >
-                <View
+                <CourseTitle
+                  style={{ flex: 4 }}
+                  width={this.getWindowWidth()}
+                  title="个人信息"
+                  backPress={() => this.goBack()}
+                  lefttype={2}
+                  righttype={0}
+                  textcolor={"white"}
+                  backPress={() => this.goBack()}
+                />
+
+                <TouchableOpacity
                   style={{
                     flex: 1,
-                    borderRadius: 20,
-                    overflow: "hidden",
+                    backgroundColor: "white",
+                    width: "90%",
+                    bottom: 0,
                     alignItems: "center",
                     justifyContent: "center",
-                    flexDirection: "row"
+                    borderRadius: 20,
+                    overflow: "hidden"
                   }}
+                  activeOpacity={1}
+                  onPress={() => this.arrowpress(0)}
                 >
-                  <View style={{ flex: 0.5 }} />
-
                   <View
                     style={{
-                      flex: 3,
-                      height: "100%",
+                      flex: 1,
+                      borderRadius: 20,
+                      overflow: "hidden",
                       alignItems: "center",
-                      justifyContent: "center"
+                      justifyContent: "center",
+                      flexDirection: "row"
                     }}
                   >
-                    <Image
+                    <View style={{ flex: 0.5 }} />
+
+                    <View
                       style={{
-                        borderRadius: 50,
-                        width: "80%",
-                        height: "70%"
-                        // borderWidth: 3
-                        // borderColor: "red"
+                        flex: 3,
+                        height: "100%",
+                        alignItems: "center",
+                        justifyContent: "center"
                       }}
-                      source={{
-                        uri:
-                          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg"
+                    >
+                      <Image
+                        style={{
+                          borderRadius: 50,
+                          width: "80%",
+                          height: "70%"
+                          // borderWidth: 3
+                          // borderColor: "red"
+                        }}
+                        source={{
+                          uri: this.state.photo_uri
+                        }}
+                      />
+                    </View>
+                    <View
+                      style={{
+                        flex: 9,
+                        backgroundColor: "white",
+                        height: "100%",
+                        justifyContent: "center"
                       }}
-                    />
-                  </View>
-                  <View
-                    style={{
-                      flex: 9,
-                      backgroundColor: "white",
-                      height: "100%",
-                      justifyContent: "center"
-                    }}
-                  >
-                    <Text style={{ left: 10, color: "black", fontSize: 20 }}>
-                      修改头像
-                    </Text>
-                  </View>
-                  <View
-                    style={{
-                      flex: 1.5,
-                      height: "65%",
-                      alignItems: "center",
-                      justifyContent: "center"
-                    }}
-                  >
-                    {this.getArraowImg(0)}
+                    >
+                      <Text style={{ left: 10, color: "black", fontSize: 20 }}>
+                        修改头像
+                      </Text>
+                    </View>
+                    <View
+                      style={{
+                        flex: 1.5,
+                        height: "65%",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {this.getArraowImg(0)}
+                    </View>
                   </View>
-                </View>
-              </TouchableOpacity>
-            </View>
-          </ImageBackground>
-          <View style={{ flex: 0.5, backgroundColor: "#F0F1F5" }} />
-          <View
-            style={{
-              width: "100%",
-              flex: 4.3,
-              alignItems: "center",
-              backgroundColor: "#F0F1F5"
-            }}
-          >
+                </TouchableOpacity>
+              </View>
+            </ImageBackground>
+            <View style={{ flex: 0.5, backgroundColor: "#F0F1F5" }} />
             <View
               style={{
-                backgroundColor: "rgb(242, 242, 242)",
-                width: "90%",
+                width: "100%",
+                flex: 4.3,
                 alignItems: "center",
-                justifyContent: "center",
-                height: "100%",
-                overflow: "hidden",
-                borderRadius: 10
+                backgroundColor: "#F0F1F5"
               }}
             >
               <View
                 style={{
-                  width: "100%",
+                  backgroundColor: "rgb(242, 242, 242)",
+                  width: "90%",
                   alignItems: "center",
                   justifyContent: "center",
-                  height: "100%"
+                  height: "100%",
+                  overflow: "hidden",
+                  borderRadius: 10
                 }}
               >
-                <TouchableOpacity
+                <View
                   style={{
-                    flex: 1,
-                    marginVertical: 1,
                     width: "100%",
-                    flexDirection: "row",
-                    backgroundColor: "white"
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "100%"
                   }}
-                  activeOpacity={1}
-                  onPress={() => this.arrowpress(1)}
                 >
-                  <View
-                    style={{
-                      flex: 2,
-                      alignItems: "center",
-                      justifyContent: "center"
-                    }}
-                  >
-                    {this.choseheadericon(1)}
-                  </View>
-                  <Text style={styles.item_text}>昵称</Text>
-                  <View
+                  <TouchableOpacity
                     style={{
-                      flex: 5,
-                      alignItems: "flex-end"
+                      flex: 1,
+                      marginVertical: 1,
+                      width: "100%",
+                      flexDirection: "row",
+                      backgroundColor: "white"
                     }}
+                    activeOpacity={1}
+                    onPress={() => this.arrowpress(1)}
                   >
-                    <Text
+                    <View
                       style={{
-                        flex: 1,
-                        fontSize: 15,
-                        textAlignVertical: "center"
+                        flex: 2,
+                        alignItems: "center",
+                        justifyContent: "center"
                       }}
-                      numberOfLines={1}
-                      ellipsizeMode={"tail"}
                     >
-                      {this.state.nickName}
-                    </Text>
-                  </View>
-                  <View
-                    style={{
-                      flex: 1.1,
-                      alignItems: "center",
-                      justifyContent: "center"
-                    }}
-                  >
-                    {this.getArraowImg(1)}
-                  </View>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={{
-                    flex: 1,
-                    width: "100%",
-                    flexDirection: "row",
-                    backgroundColor: "white",
-                    marginVertical: 1
-                  }}
-                  activeOpacity={1}
-                  onPress={() => this.arrowpress(2)}
-                >
-                  <View
-                    style={{
-                      flex: 2,
-                      alignItems: "center",
-                      justifyContent: "center"
-                    }}
-                  >
-                    {this.choseheadericon(2)}
-                  </View>
-                  <Text style={styles.item_text}>生日</Text>
-                  <View
-                    style={{
-                      flex: 5,
-                      alignItems: "flex-end"
-                    }}
-                  >
-                    <Text
+                      {this.choseheadericon(1)}
+                    </View>
+                    <Text style={styles.item_text}>昵称</Text>
+                    <View
                       style={{
-                        flex: 1,
-                        fontSize: 15,
-                        textAlignVertical: "center"
+                        flex: 5,
+                        alignItems: "flex-end"
                       }}
-                      numberOfLines={1}
-                      ellipsizeMode={"tail"}
                     >
-                      {this.state.birthday_time}
-                    </Text>
-                  </View>
-                  <View
+                      <Text
+                        style={{
+                          flex: 1,
+                          fontSize: 15,
+                          textAlignVertical: "center"
+                        }}
+                        numberOfLines={1}
+                        ellipsizeMode={"tail"}
+                      >
+                        {this.state.nickName}
+                      </Text>
+                    </View>
+                    <View
+                      style={{
+                        flex: 1.1,
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {this.getArraowImg(1)}
+                    </View>
+                  </TouchableOpacity>
+                  <TouchableOpacity
                     style={{
-                      flex: 1.1,
-                      alignItems: "center",
-                      justifyContent: "center"
+                      flex: 1,
+                      width: "100%",
+                      flexDirection: "row",
+                      backgroundColor: "white",
+                      marginVertical: 1
                     }}
+                    activeOpacity={1}
+                    onPress={() => this.arrowpress(2)}
                   >
-                    {this.getArraowImg(2)}
-                  </View>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={{
-                    flex: 1,
-                    width: "100%",
-                    flexDirection: "row",
-                    backgroundColor: "white",
-                    marginVertical: 1
-                  }}
-                  activeOpacity={1}
-                  onPress={() => this.arrowpress(3)}
-                >
-                  <View
+                    <View
+                      style={{
+                        flex: 2,
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {this.choseheadericon(2)}
+                    </View>
+                    <Text style={styles.item_text}>生日</Text>
+                    <View
+                      style={{
+                        flex: 5,
+                        alignItems: "flex-end"
+                      }}
+                    >
+                      <Text
+                        style={{
+                          flex: 1,
+                          fontSize: 15,
+                          textAlignVertical: "center"
+                        }}
+                        numberOfLines={1}
+                        ellipsizeMode={"tail"}
+                      >
+                        {this.state.birthday_time}
+                      </Text>
+                    </View>
+                    <View
+                      style={{
+                        flex: 1.1,
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {this.getArraowImg(2)}
+                    </View>
+                  </TouchableOpacity>
+                  <TouchableOpacity
                     style={{
-                      flex: 2,
-                      alignItems: "center",
-                      justifyContent: "center"
+                      flex: 1,
+                      width: "100%",
+                      flexDirection: "row",
+                      backgroundColor: "white",
+                      marginVertical: 1
                     }}
+                    activeOpacity={1}
+                    onPress={() => this.arrowpress(3)}
                   >
-                    {this.choseheadericon(3)}
-                  </View>
+                    <View
+                      style={{
+                        flex: 2,
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {this.choseheadericon(3)}
+                    </View>
 
-                  <Text style={styles.item_text}>所在地区</Text>
-                  <View
-                    style={{
-                      flex: 5,
-                      alignItems: "flex-end"
-                    }}
-                  >
-                    <Text
+                    <Text style={styles.item_text}>所在地区</Text>
+                    <View
                       style={{
-                        flex: 1,
-                        fontSize: 15,
-                        textAlignVertical: "center"
+                        flex: 5,
+                        alignItems: "flex-end"
                       }}
-                      numberOfLines={1}
-                      ellipsizeMode={"tail"}
                     >
-                      {this.state.cisys}
-                    </Text>
-                  </View>
-                  <View
-                    style={{
-                      flex: 1.1,
-                      alignItems: "center",
-                      justifyContent: "center"
-                    }}
-                  >
-                    {this.getArraowImg(3)}
-                  </View>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={{
-                    flex: 1,
-                    width: "100%",
-                    flexDirection: "row",
-                    backgroundColor: "white",
-                    marginVertical: 1
-                  }}
-                  activeOpacity={1}
-                  onPress={() => this.arrowpress(4)}
-                >
-                  <View
+                      <Text
+                        style={{
+                          flex: 1,
+                          fontSize: 15,
+                          textAlignVertical: "center"
+                        }}
+                        numberOfLines={1}
+                        ellipsizeMode={"tail"}
+                      >
+                        {this.state.cisys}
+                      </Text>
+                    </View>
+                    <View
+                      style={{
+                        flex: 1.1,
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {this.getArraowImg(3)}
+                    </View>
+                  </TouchableOpacity>
+                  <TouchableOpacity
                     style={{
-                      flex: 2,
-                      alignItems: "center",
-                      justifyContent: "center"
+                      flex: 1,
+                      width: "100%",
+                      flexDirection: "row",
+                      backgroundColor: "white",
+                      marginVertical: 1
                     }}
+                    activeOpacity={1}
+                    onPress={() => this.arrowpress(4)}
                   >
-                    {this.choseheadericon(4)}
-                  </View>
+                    <View
+                      style={{
+                        flex: 2,
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {this.choseheadericon(4)}
+                    </View>
 
-                  <Text style={styles.item_text}>我的学校</Text>
-                  <View
-                    style={{
-                      flex: 5,
-                      alignItems: "flex-end"
-                    }}
-                  >
-                    <Text
+                    <Text style={styles.item_text}>我的学校</Text>
+                    <View
                       style={{
-                        flex: 1,
-                        fontSize: 15,
-                        textAlignVertical: "center"
+                        flex: 5,
+                        alignItems: "flex-end"
                       }}
-                      numberOfLines={1}
-                      ellipsizeMode={"tail"}
                     >
-                      {this.state.schoolName}
-                    </Text>
-                  </View>
-                  <View
-                    style={{
-                      flex: 1.1,
-                      alignItems: "center",
-                      justifyContent: "center"
-                    }}
-                  >
-                    {this.getArraowImg(4)}
-                  </View>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={{
-                    flex: 1,
-                    marginTop: 1,
-                    width: "100%",
-                    flexDirection: "row",
-                    backgroundColor: "white",
-                    marginVertical: 1
-                  }}
-                  activeOpacity={1}
-                  onPress={() => this.arrowpress(5)}
-                >
-                  <View
+                      <Text
+                        style={{
+                          flex: 1,
+                          fontSize: 15,
+                          textAlignVertical: "center"
+                        }}
+                        numberOfLines={1}
+                        ellipsizeMode={"tail"}
+                      >
+                        {this.state.schoolName}
+                      </Text>
+                    </View>
+                    <View
+                      style={{
+                        flex: 1.1,
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {this.getArraowImg(4)}
+                    </View>
+                  </TouchableOpacity>
+                  <TouchableOpacity
                     style={{
-                      flex: 2,
-                      alignItems: "center",
-                      justifyContent: "center"
+                      flex: 1,
+                      marginTop: 1,
+                      width: "100%",
+                      flexDirection: "row",
+                      backgroundColor: "white",
+                      marginVertical: 1
                     }}
+                    activeOpacity={1}
+                    onPress={() => this.arrowpress(5)}
                   >
-                    {this.choseheadericon(5)}
-                  </View>
+                    <View
+                      style={{
+                        flex: 2,
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {this.choseheadericon(5)}
+                    </View>
 
-                  <Text style={styles.item_text}>我的年级</Text>
-                  <View
-                    style={{
-                      flex: 5,
-                      alignItems: "flex-end"
-                    }}
-                  >
-                    <Text
+                    <Text style={styles.item_text}>我的年级</Text>
+                    <View
+                      style={{
+                        flex: 5,
+                        alignItems: "flex-end"
+                      }}
+                    >
+                      <Text
+                        style={{
+                          flex: 1.1,
+                          fontSize: 15,
+                          textAlignVertical: "center"
+                        }}
+                        numberOfLines={1}
+                        ellipsizeMode={"tail"}
+                      >
+                        {this.state.grade_text}
+                      </Text>
+                    </View>
+                    <View
                       style={{
                         flex: 1.1,
-                        fontSize: 15,
-                        textAlignVertical: "center"
+                        alignItems: "center",
+                        justifyContent: "center"
                       }}
-                      numberOfLines={1}
-                      ellipsizeMode={"tail"}
                     >
-                      {this.state.grade_text}
-                    </Text>
-                  </View>
-                  <View
-                    style={{
-                      flex: 1.1,
-                      alignItems: "center",
-                      justifyContent: "center"
-                    }}
-                  >
-                    {this.getArraowImg(5)}
-                  </View>
-                </TouchableOpacity>
+                      {this.getArraowImg(5)}
+                    </View>
+                  </TouchableOpacity>
+                </View>
               </View>
             </View>
-          </View>
 
-          <View
-            style={{
-              width: "100%",
-              flex: 4,
-              backgroundColor: "#F0F1F5",
-              flexDirection: "column"
-            }}
-          >
-            <View style={{ flex: 2.5 }} />
-            <View style={{ flex: 2, flexDirection: "row" }}>
-              <View style={{ flex: 1 }} />
-              <View
-                style={{
-                  flex: 7,
-                  width: "100%",
-                  height: "100%"
-                }}
-              >
-                <TouchableOpacity
-                  activeOpacity={1}
+            <View
+              style={{
+                width: "100%",
+                flex: 4,
+                backgroundColor: "#F0F1F5",
+                flexDirection: "column"
+              }}
+            >
+              <View style={{ flex: 2.5 }} />
+              <View style={{ flex: 2, flexDirection: "row" }}>
+                <View style={{ flex: 1 }} />
+                <View
                   style={{
-                    flex: 2,
+                    flex: 7,
                     width: "100%",
-                    alignItems: "center",
-                    justifyContent: "center",
                     height: "100%"
                   }}
-                  onPress={() => this.logout()}
                 >
-                  <ImageBackground
-                    source={require("../images/userInfo/logoutbg1.png")}
+                  <TouchableOpacity
+                    activeOpacity={1}
                     style={{
-                      flex: 1,
+                      flex: 2,
                       width: "100%",
                       alignItems: "center",
                       justifyContent: "center",
                       height: "100%"
                     }}
-                    imageStyle={{ resizeMode: "contain" }}
+                    onPress={() => this.logout()}
                   >
-                    <Text
+                    <ImageBackground
+                      source={require("../images/userInfo/logoutbg1.png")}
                       style={{
-                        fontSize: 30,
-                        color: "white",
+                        flex: 1,
                         width: "100%",
-                        textAlign: "center"
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%"
                       }}
+                      imageStyle={{ resizeMode: "contain" }}
                     >
-                      退出登录
-                    </Text>
-                  </ImageBackground>
-                </TouchableOpacity>
+                      <Text
+                        style={{
+                          fontSize: 30,
+                          color: "white",
+                          width: "100%",
+                          textAlign: "center"
+                        }}
+                      >
+                        退出登录
+                      </Text>
+                    </ImageBackground>
+                  </TouchableOpacity>
+                  <View style={{ flex: 1 }} />
+                </View>
                 <View style={{ flex: 1 }} />
               </View>
-              <View style={{ flex: 1 }} />
+              <View style={{ flex: 0.8 }} />
             </View>
-            <View style={{ flex: 0.8 }} />
           </View>
         </View>
       </View>
-      </View>
     );
   }
 
@@ -647,6 +650,13 @@ export default class PersonalInfo extends BasePage {
       birthday_time: year + "年" + month + "月" + day + "日"
     });
   }
+
+  photoback(uri) {
+    this.setState({
+      photo_uri: uri
+    });
+    this.chosephoto.setModalVisible(false);
+  }
 }
 
 const styles = StyleSheet.create({

pages/components/PersonalInfoDialog.js

@@ -178,6 +178,7 @@ export default class PersonalInfoDialog extends Component<Props> {
                 <TextInput
                   placeholder={this.state.placeholder}
                   editable={true} //是否可编辑
+                  autoFocus={true}
                   style={{
                     width: "90%",
                     height: "90%",