1.提交地区选择modal

2.个人信息界面增加地区选择功能

pages/components/PersonalInfo.js

@@ -25,6 +25,7 @@ import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
 import CourseTitle from "./CourseTitle";
 import ChosePhoto from "./ChosePhoto";
+import RegionModal from "./RegionModal";
 import Header from "./Header";
 import PersonalInfoDialog from "./PersonalInfoDialog";
 
@@ -32,7 +33,8 @@ type Props = {};
 export default class PersonalInfo extends BasePage {
   state = {
     nickName: "初始昵称",
-    schoolName: "未设置"
+    schoolName: "未设置",
+    cisys: "所在地区"
   };
   updateState(data) {
     this.setState(data);
@@ -45,6 +47,10 @@ export default class PersonalInfo extends BasePage {
           updateParentState={this.updateState.bind(this)}
         />
         <ChosePhoto ref={view => (this.chosephoto = view)} />
+        <RegionModal
+          ref={view => (this.regionmodal = view)}
+          cityscommit={this.cityscommit.bind(this)}
+        />
         <StatusBar
           backgroundColor={"transparent"}
           barStyle={"dark-content"}
@@ -403,7 +409,7 @@ export default class PersonalInfo extends BasePage {
                   textAlignVertical: "center"
                 }}
               >
-                所在地区。。。。
+                {this.state.cisys}
               </Text>
             </View>
             <View
@@ -582,7 +588,7 @@ export default class PersonalInfo extends BasePage {
         alert("生日");
         break;
       case 3:
-        alert("所在地区");
+        this.regionmodal.setModalVisible(true);
         break;
       case 4:
         this.dialog.setInfo("我的学校", "学校名称");
@@ -597,14 +603,11 @@ export default class PersonalInfo extends BasePage {
   logout() {
     alert("点击退出了");
   }
-}
-export class item extends Component<Props> {
-  render() {
-    return (
-      <View>
-        <View style={{}} />
-      </View>
-    );
+
+  cityscommit(provinces_name, citys_name) {
+    this.setState({
+      cisys: provinces_name + citys_name
+    });
   }
 }
 

pages/components/RegionModal.js

@@ -0,0 +1,338 @@
+/**
+ * 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 RegionModal extends Component<Props> {
+  state = {
+    modalVisible: false,
+    cityjson: JSON.parse(JSON.stringify(CitysData.provinces)),
+    provinces: CitysData.provinces[0].provinces,
+    provinces_views: [],
+    provinces_views_index: -1,
+    city_data: CitysData.provinces[0].citys,
+    city_views: [],
+    city_views_index: -1,
+    click_provinces_name: "",
+    click_city_name: "",
+    text_height: -1
+  };
+
+  render() {
+    return (
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={this.state.modalVisible}
+        onRequestClose={() => {
+          this.setState({ modalVisible: false });
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            flexDirection: "column"
+          }}
+        >
+          <TouchableOpacity
+            style={{
+              flex: 3.2,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              width: "100%"
+            }}
+            activeOpacity={1}
+            onPress={() =>
+              this.setState({
+                modalVisible: false
+              })
+            }
+          />
+          <View
+            style={{
+              flex: 2,
+              backgroundColor: "white",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              width: "100%"
+            }}
+          >
+            <View
+              style={{
+                flex: 1,
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <TouchableOpacity
+                style={{
+                  flex: 1
+                }}
+                activeOpacity={1}
+                onPress={() => this.cancel()}
+              >
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "rgba(59, 59, 59, 1)",
+                      textAlignVertical: "center"
+                    }}
+                  >
+                    取消
+                  </Text>
+                </View>
+              </TouchableOpacity>
+              <View style={{ flex: 3.5 }} />
+              <TouchableOpacity
+                style={{
+                  flex: 1
+                }}
+                activeOpacity={1}
+                onPress={() => this.commit()}
+              >
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 20,
+                      color: "rgba(59, 59, 59, 1)",
+                      textAlignVertical: "center"
+                    }}
+                  >
+                    完成
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            <View
+              style={{
+                flex: 0.01,
+                width: "90%",
+                // backgroundColor: "rgba(246, 247, 248, 1)"
+                backgroundColor: "red"
+              }}
+            />
+            <View
+              style={{
+                flex: 5,
+                flexDirection: "row"
+              }}
+            >
+              <View
+                style={{
+                  flex: 1
+                }}
+              >
+                <ScrollView
+                  style={{
+                    flex: 1
+                  }}
+                  ref={view => (this.provinces_scroll = view)}
+                  onLayout={() => this.provinces_onlayout()}
+                >
+                  {this.scroll_item()}
+                </ScrollView>
+              </View>
+              <View
+                style={{
+                  flex: 1
+                }}
+              >
+                <ScrollView
+                  ref={view => (this.city_scroll = view)}
+                  onLayout={() => this.city_onlayout()}
+                  style={{
+                    flex: 1
+                  }}
+                >
+                  {this.scroll_city_item(this.state.city_data)}
+                </ScrollView>
+              </View>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+
+  provinces_onlayout() {
+    if (this.state.provinces_views_index != -1) {
+      this.provinces_scroll.scrollTo({
+        x: 0,
+        y: (this.state.text_height + 20) * this.state.provinces_views_index,
+        duration: 500
+      });
+    }
+  }
+
+  city_onlayout() {
+    if (this.state.city_views_index != -1) {
+      this.city_scroll.scrollTo({
+        x: 0,
+        y: (this.state.text_height + 20) * this.state.city_views_index,
+        duration: 500
+      });
+    }
+  }
+  commit() {
+    if (
+      this.state.provinces_views_index == -1 ||
+      this.state.city_views_index == -1
+    ) {
+      alert("请选择完整地区");
+    } else {
+      this.props.cityscommit(
+        this.state.click_provinces_name,
+        this.state.click_city_name
+      );
+      this.setModalVisible(false);
+    }
+  }
+
+  cancel() {
+    this.setModalVisible(false);
+  }
+
+  setModalVisible(visible) {
+    this.setState({
+      modalVisible: visible
+    });
+  }
+
+  scroll_item() {
+    // console.log(this.state.cityjson);
+    for (var i = 0; i < this.state.cityjson.length; i++) {
+      let index = i;
+      let textstyle = null;
+      if (this.state.provinces_views_index == i) {
+        textstyle = styles.item_text_click;
+      } else {
+        textstyle = styles.item_text;
+      }
+      this.state.provinces_views[i] = (
+        <Text
+          style={textstyle}
+          key={i}
+          onPress={() => this.get_city(index)}
+          onLayout={event => this.onLayout(event)}
+        >
+          {CitysData.provinces[i].provinceName}
+        </Text>
+      );
+    }
+    return this.state.provinces_views;
+  }
+  onLayout = event => {
+    if (this.state.text_height == -1) {
+      this.setState({
+        text_height: event.nativeEvent.layout.height
+      });
+    } else {
+    }
+  };
+
+  get_city(index) {
+    console.log(index);
+    this.setState({
+      city_data: CitysData.provinces[index].citys,
+      text_color: "blue",
+      provinces_views_index: index,
+      city_views_index: -1,
+      click_provinces_name: CitysData.provinces[index].provinceName,
+      click_city_name: ""
+    });
+
+    this.city_scroll.scrollTo({
+      x: 0,
+      y: 0,
+      duration: 100
+    });
+    // this.forceUpdate();
+  }
+
+  scroll_city_item(citys) {
+    this.state.city_views = [];
+    for (var i = 0; i < citys.length; i++) {
+      let index = i;
+      if (this.state.city_views_index == i) {
+        textstyle = styles.item_text_click;
+      } else {
+        textstyle = styles.item_text;
+      }
+      this.state.city_views[i] = (
+        <Text style={textstyle} key={i} onPress={() => this.click_citys(index)}>
+          {citys[i].citysName}
+        </Text>
+      );
+    }
+    return this.state.city_views;
+  }
+
+  click_citys(index) {
+    this.setState({
+      city_views_index: index,
+      click_city_name: this.state.city_data[index].citysName
+    });
+  }
+}
+const styles = StyleSheet.create({
+  item_text: {
+    color: "rgba(77, 77, 77, 1)",
+    fontSize: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 20,
+    width: "100%",
+    textAlignVertical: "center",
+    textAlign: "center"
+  },
+  item_text_click: {
+    color: "rgba(59, 149, 243, 1)",
+    fontSize: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 20,
+    width: "100%",
+    textAlignVertical: "center",
+    textAlign: "center"
+  }
+});