1.提交生日选择框

2.给个人中心增加生日选择框事件

pages/components/BirthdayModal.js

@@ -0,0 +1,528 @@
+/**
+ * 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";
+
+type Props = {};
+export default class BirthdayModal extends Component<Props> {
+  state = {
+    text_height: -1,
+    modalVisible: false,
+    year_type: false, //true为闰年，false为平年
+    year_array_views: [],
+    year_array: [],
+    year_array_views_index: -1,
+    month_array_views: [],
+    month_array_views_indexs: -1,
+    month_array: [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ],
+    day_array: [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12",
+      "13",
+      "14",
+      "15",
+      "16",
+      "17",
+      "18",
+      "19",
+      "20",
+      "21",
+      "22",
+      "23",
+      "24",
+      "25",
+      "26",
+      "27",
+      "28",
+      "29",
+      "30",
+      "31"
+    ],
+    day_array_views: [],
+    day_array_views_index: -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.05,
+                width: "90%",
+                backgroundColor: "rgba(246, 247, 248, 1)"
+              }}
+            />
+            <View
+              style={{
+                flex: 5,
+                flexDirection: "row"
+              }}
+            >
+              <View
+                style={{
+                  flex: 1
+                }}
+              >
+                <ScrollView
+                  style={{
+                    flex: 1
+                  }}
+                  ref={view => (this.year_scroll = view)}
+                  onLayout={() => this.year_onlayout()}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {this.create_year_item()}
+                </ScrollView>
+              </View>
+              <View
+                style={{
+                  flex: 1
+                }}
+              >
+                <ScrollView
+                  ref={view => (this.month_scroll = view)}
+                  onLayout={() => this.month_onlayout()}
+                  style={{
+                    flex: 1
+                  }}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {this.create_month_item()}
+                </ScrollView>
+              </View>
+              <View
+                style={{
+                  flex: 1
+                }}
+              >
+                <ScrollView
+                  ref={view => (this.day_scroll = view)}
+                  onLayout={() => this.day__onlayout()}
+                  style={{
+                    flex: 1
+                  }}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {this.create_day_item()}
+                </ScrollView>
+              </View>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+
+  componentWillMount() {
+    var date = new Date();
+    var year = parseInt(date.getFullYear().toString());
+    if (this.state.year_array.length == 0) {
+      let position = 0;
+      for (
+        let index = parseInt(year - 50);
+        index < parseInt(year + 10);
+        index++
+      ) {
+        if (parseInt(year) == index) {
+          this.setState({
+            year_array_views_index: position
+          });
+        }
+
+        this.state.year_array.push(index);
+        position++;
+      }
+    }
+    console.log(parseInt(date.getDate()));
+    this.setState({
+      month_array_views_indexs: parseInt(date.getMonth()),
+      day_array_views_index: parseInt(date.getDate()) - 1
+    });
+
+    // var hour = date.getHours().toString();
+    // var minute = date.getMinutes().toString();
+  }
+
+  year_onlayout() {
+    if (this.state.year_array_views_index != -1) {
+      this.year_scroll.scrollTo({
+        x: 0,
+        y: (this.state.text_height + 20) * this.state.year_array_views_index,
+        duration: 500
+      });
+    }
+  }
+
+  month_onlayout() {
+    if (this.state.month_array_views_indexs != -1) {
+      this.month_scroll.scrollTo({
+        x: 0,
+        y: (this.state.text_height + 20) * this.state.month_array_views_indexs,
+        duration: 500
+      });
+    }
+  }
+
+  day__onlayout() {
+    if (this.state.day_array_views_index != -1) {
+      this.day_scroll.scrollTo({
+        x: 0,
+        y: (this.state.text_height + 20) * this.state.day_array_views_index,
+        duration: 500
+      });
+    }
+  }
+
+  create_year_item() {
+    this.state.year_array_views = [];
+    for (var i = 0; i < this.state.year_array.length; i++) {
+      let index = i;
+      let textstyle = null;
+      if (this.state.year_array_views_index == i) {
+        textstyle = styles.item_text_click;
+      } else {
+        textstyle = styles.item_text;
+      }
+      this.state.year_array_views.push(
+        <Text
+          style={textstyle}
+          key={i}
+          onPress={() => this.click_year_item(index)}
+          onLayout={event => this.text_onLayout(event)}
+        >
+          {this.state.year_array[i]}年
+        </Text>
+      );
+    }
+    return this.state.year_array_views;
+  }
+
+  click_year_item(index) {
+    this.setState({
+      year_array_views_index: index,
+      year_type: this.getRunYear(this.state.year_array[index])
+    });
+  }
+
+  create_month_item() {
+    this.state.month_array_views = [];
+    for (var i = 0; i < this.state.month_array.length; i++) {
+      let index = i;
+      let textstyle = null;
+      if (this.state.month_array_views_indexs == i) {
+        textstyle = styles.item_text_click;
+      } else {
+        textstyle = styles.item_text;
+      }
+      this.state.month_array_views.push(
+        <Text
+          style={textstyle}
+          key={i}
+          onPress={() => this.click_month_item(index)}
+        >
+          {this.state.month_array[i]}月
+        </Text>
+      );
+    }
+    return this.state.month_array_views;
+  }
+
+  click_month_item(index) {
+    this.setState({
+      month_array_views_indexs: index
+    });
+  }
+
+  create_day_item() {
+    this.state.day_array_views = [];
+    var forNum = 0;
+    //获取月份
+    var month_index = this.state.month_array_views_indexs;
+    switch (month_index + 1) {
+      case 1:
+      case 3:
+      case 5:
+      case 7:
+      case 8:
+      case 10:
+      case 12:
+        //31天
+        forNum = 31;
+        break;
+      case 4:
+      case 6:
+      case 9:
+      case 11:
+        //30天
+        forNum = 30;
+        break;
+      case 2:
+        //2月判断平年闰年
+        if (
+          this.getRunYear(
+            this.state.year_array[this.state.year_array_views_index]
+          )
+        ) {
+          //闰年2月29
+          forNum = 29;
+        } else {
+          //平年2月28
+          forNum = 28;
+        }
+        break;
+    }
+
+    for (var i = 0; i < forNum; i++) {
+      //console.log(i);
+      let index = i;
+      let textstyle = null;
+      if (this.state.day_array_views_index == i) {
+        textstyle = styles.item_text_click;
+      } else {
+        textstyle = styles.item_text;
+      }
+      this.state.day_array_views.push(
+        <Text
+          style={textstyle}
+          key={i}
+          onPress={() => this.click_day_item(index)}
+        >
+          {this.state.day_array[i]}日
+        </Text>
+      );
+    }
+
+    return this.state.day_array_views;
+  }
+  click_day_item(index) {
+    this.setState({
+      day_array_views_index: index
+    });
+  }
+
+  text_onLayout = event => {
+    if (this.state.text_height == -1) {
+      this.setState({
+        text_height: event.nativeEvent.layout.height
+      });
+    } else {
+    }
+  };
+
+  commit() {
+    if (
+      this.state.year_array_views_index == -1 ||
+      this.state.month_array_views_indexs == -1 ||
+      this.state.day_array_views_index == -1
+    ) {
+      alert("请选择完整日期");
+    } else {
+      var nianyueri =
+        this.state.year_array[this.state.year_array_views_index] +
+        "年" +
+        this.state.month_array[this.state.month_array_views_indexs] +
+        "月" +
+        this.state.day_array[this.state.day_array_views_index] +
+        "日";
+      this.props.birthdaycommit(nianyueri);
+      this.setModalVisible(false);
+    }
+  }
+
+  cancel() {
+    this.setModalVisible(false);
+    // alert(this.getmyDate());
+  }
+
+  setModalVisible(visible) {
+    this.setState({
+      modalVisible: visible
+    });
+  }
+  getmyDate() {
+    var date = new Date();
+    var year = date.getFullYear().toString();
+    var month = (date.getMonth() + 1).toString();
+    var day = date.getDate().toString();
+    var hour = date.getHours().toString();
+    var minute = date.getMinutes().toString();
+
+    return year + "年" + month + "月" + day + "日" + " " + hour + ":" + minute;
+  }
+
+  getRunYear(year) {
+    if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
+      //闰年2月29
+      // console.log("闰年");
+      return true;
+    } else {
+      //平年2月28
+      // console.log("平年");
+      return false;
+    }
+  }
+}
+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"
+  }
+});

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 BirthdayModal from "./BirthdayModal";
 import GradeSelectionModal from "./GradeSelectionModal";
 import Header from "./Header";
 import PersonalInfoDialog from "./PersonalInfoDialog";
@@ -37,7 +38,8 @@ export default class PersonalInfo extends BasePage {
     schoolName: "未设置",
     cisys: "北京市",
     grade_text: "七年级",
-    grade_index: 6
+    grade_index: 6,
+    birthday_time: 0
   };
   updateState(data) {
     this.setState(data);
@@ -59,6 +61,10 @@ export default class PersonalInfo extends BasePage {
           commitGrade={this.commitGrade.bind(this)}
           grade_index={this.state.grade_index}
         />
+        <BirthdayModal
+          ref={view => (this.birthdaymodal = view)}
+          birthdaycommit={this.birthdaycommit.bind(this)}
+        />
         <StatusBar backgroundColor={"transparent"} translucent={true} />
 
         <View
@@ -283,7 +289,7 @@ export default class PersonalInfo extends BasePage {
                       numberOfLines={1}
                       ellipsizeMode={"tail"}
                     >
-                      生日。。。。
+                      {this.state.birthday_time}
                     </Text>
                   </View>
                   <View
@@ -590,7 +596,8 @@ export default class PersonalInfo extends BasePage {
         this.dialog.setModalVisible(true, 1);
         break;
       case 2:
-        alert("生日");
+        // alert("生日");
+        this.birthdaymodal.setModalVisible(true);
         break;
       case 3:
         this.regionmodal.setModalVisible(true);
@@ -620,6 +627,11 @@ export default class PersonalInfo extends BasePage {
       grade_index: index
     });
   }
+  birthdaycommit(time) {
+    this.setState({
+      birthday_time: time
+    });
+  }
 }
 
 const styles = StyleSheet.create({