1.增加年级选择

2.给个人信息增加选择年级的框

pages/components/GradeSelectionModal.js

@@ -0,0 +1,243 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { Component } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  TouchableOpacity,
+  ImageBackground,
+  TextInput,
+  Button,
+  StatusBar,
+  Modal,
+  ScrollView,
+  TouchableHighlight,
+  DeviceEventEmitter,
+  findNodeHandle,
+  UIManager
+} from "react-native";
+
+import CitysData from "../../data/citys.json";
+
+type Props = {};
+export default class GradeSelectionModal extends Component<Props> {
+  state = {
+    modalVisible: false,
+    grade_data: [
+      "一年级",
+      "二年级",
+      "三年级",
+      "四年级",
+      "五年级",
+      "六年级",
+      "七年级",
+      "八年级",
+      "九年级"
+    ]
+  };
+
+  render() {
+    return (
+      <Modal
+        // animationType="fade"
+        animationType="none"
+        transparent={true}
+        visible={this.state.modalVisible}
+        onRequestClose={() => {
+          this.setState({ modalVisible: false });
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+        >
+          <View
+            style={{
+              width: "92%",
+              backgroundColor: "white",
+              height: "80%",
+              borderRadius: 20,
+              flexDirection: "column",
+              overflow: "hidden",
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <View
+              style={{
+                flex: 1,
+                justifyContent: "center",
+                alignItems: "center"
+              }}
+            >
+              <Text
+                style={{
+                  textAlign: "center",
+                  fontSize: 22,
+                  color: "rgba(58, 58, 58, 1)"
+                }}
+              >
+                我所在的年级
+              </Text>
+            </View>
+            <View
+              style={{
+                flex: 3,
+                width: "100%",
+                marginTop: 5
+              }}
+            >
+              {this.centerView()}
+            </View>
+            <View style={{ flex: 2, width: "90%" }}>
+              <ImageBackground
+                source={require("../images/userInfo/logoutbg1.png")}
+                style={{
+                  flex: 1,
+                  width: "100%",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  height: "100%"
+                }}
+                imageStyle={{
+                  resizeMode: "contain"
+                }}
+              >
+                <TouchableOpacity
+                  style={{
+                    width: "100%",
+                    alignItems: "center",
+                    height: "40%",
+                    justifyContent: "center"
+                  }}
+                  activeOpacity={1}
+                  onPress={() => this.commit()}
+                >
+                  <Text
+                    style={{
+                      fontSize: 30,
+                      color: "white",
+                      width: "100%",
+                      textAlign: "center"
+                    }}
+                  >
+                    确定
+                  </Text>
+                </TouchableOpacity>
+              </ImageBackground>
+            </View>
+            <View style={{ flex: 0.5 }} />
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+
+  centerView() {
+    return (
+      <View
+        style={{
+          flex: 1,
+          flexDirection: "column",
+          alignItems: "center"
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            justifyContent: "space-between",
+            width: "90%",
+            flexDirection: "row"
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => this.clickGrade()}
+            style={styles.item}
+          >
+            <Text style={styles.item_text}>一年级</Text>
+          </TouchableOpacity>
+          <View style={styles.item}>
+            <Text style={styles.item_text}>二年级</Text>
+          </View>
+          <View style={styles.item}>
+            <Text style={styles.item_text}>三年级</Text>
+          </View>
+        </View>
+        <View
+          style={{
+            flex: 1,
+            justifyContent: "space-between",
+            width: "90%",
+            flexDirection: "row"
+          }}
+        >
+          <View style={styles.item}>
+            <Text style={styles.item_text}>四年级</Text>
+          </View>
+          <View style={styles.item}>
+            <Text style={styles.item_text}>五年级</Text>
+          </View>
+          <View style={styles.item}>
+            <Text style={styles.item_text}>六年级</Text>
+          </View>
+        </View>
+        <View
+          style={{
+            flex: 1,
+            justifyContent: "space-between",
+            width: "90%",
+            flexDirection: "row"
+          }}
+        >
+          <View style={styles.item}>
+            <Text style={styles.item_text}>七年级</Text>
+          </View>
+          <View style={styles.item}>
+            <Text style={styles.item_text}>八年级</Text>
+          </View>
+          <View style={styles.item}>
+            <Text style={styles.item_text}>九年级</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  commit() {
+    alert("确定");
+  }
+
+  setModalVisible(visible) {
+    this.setState({
+      modalVisible: visible
+    });
+  }
+  clickGrade() {}
+}
+const styles = StyleSheet.create({
+  item: {
+    width: 127,
+    height: 53,
+    backgroundColor: "rgba(61, 192, 252, 0.15)",
+    borderRadius: 30
+  },
+  item_text: {
+    flex: 1,
+    textAlign: "center",
+    textAlignVertical: "center",
+    color: "rgba(58, 58, 58, 1)",
+    fontSize: 18
+  }
+});

pages/components/PersonalInfo.js

@@ -26,6 +26,7 @@ import BasePage from "../BasePage";
 import CourseTitle from "./CourseTitle";
 import ChosePhoto from "./ChosePhoto";
 import RegionModal from "./RegionModal";
+import GradeSelectionModal from "./GradeSelectionModal";
 import Header from "./Header";
 import PersonalInfoDialog from "./PersonalInfoDialog";
 
@@ -51,6 +52,10 @@ export default class PersonalInfo extends BasePage {
           ref={view => (this.regionmodal = view)}
           cityscommit={this.cityscommit.bind(this)}
         />
+        <GradeSelectionModal
+          ref={view => (this.gradeselectionModal = view)}
+          cityscommit={this.cityscommit.bind(this)}
+        />
         <StatusBar backgroundColor={"transparent"} translucent={true} />
 
         <View
@@ -499,7 +504,7 @@ export default class PersonalInfo extends BasePage {
               </View>
               <View style={{ flex: 1 }} />
             </View>
-            <View style={{ flex: 0.5 }} />
+            <View style={{ flex: 0.8 }} />
           </View>
         </View>
       </View>
@@ -592,7 +597,7 @@ export default class PersonalInfo extends BasePage {
         this.dialog.setModalVisible(true, 2);
         break;
       case 5:
-        alert("我的年级");
+        this.gradeselectionModal.setModalVisible(true);
         break;
     }
   }

pages/components/RegionModal.js

@@ -273,7 +273,6 @@ export default class RegionModal extends Component<Props> {
   };
 
   get_city(index) {
-    console.log(index);
     this.setState({
       city_data: CitysData.provinces[index].citys,
       text_color: "blue",