'首页ui适配'

pages/CourseDetails.js

@@ -26,18 +26,22 @@ import courseDetails from './services/courseDetails'
 export default class CourseDetails extends Component {
   componentDidMount() {
     const { courseId } = this.props.navigation.state.params;
-    console.log(courseId)
     courseDetails.getCourseDetails(courseId).success(res => {
       console.log('列表',res.data)
+      const courseList = res.data.course;
+      const wareList = res.data.wareList;
       this.setState({
-        courseList: 222
+        courseList,
+        wareList
       })
     });
   }
   state = {
     fullStyle: {},
     lefts: 0,
-    courseList: 111
+    courseList: {},
+    wareList: {},
+    uri: 'http://chimee.org/vod/1.mp4'
   }
   render() {
     return (
@@ -46,16 +50,15 @@ export default class CourseDetails extends Component {
           <View>
             <VideoExplain 
             full={this.full.bind(this)}
-            title={'同步辅导语文一年级下册'}
-            details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
-            uri={'http://chimee.org/vod/1.mp4'}
+            uri={ this.state.uri }
             dataList={ this.state.courseList }
+            ref={view => (this.video = view)} //设置ID
             videoback={this.back.bind(this) } 
             />
           </View>
           <View style={ this.state.fullStyle }>
-            <CourseListRow title={'课件'}></CourseListRow>
-            <CourseListLine title={'课件'}></CourseListLine>
+            <CourseListRow title={'课件'} wareList={ this.state.wareList} changeUri={ this.changeUri.bind(this) }></CourseListRow>
+            {/* <CourseListLine title={'课件'} wareList={ this.state.wareList}></CourseListLine> */}
             <Comment title={ '全部评论' }></Comment>
           </View> 
         </ScrollView>
@@ -84,6 +87,14 @@ export default class CourseDetails extends Component {
     }
 
   }
+  changeUri(uri) {
+    console.log(uri)
+    this.setState({
+      uri
+    })
+    // 开始播放
+    this.video.start();
+  }
 }
 
 const styles = StyleSheet.create({

pages/components/BirthdayModal.js

@@ -0,0 +1,527 @@
+/**
+ * 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(this.props.year);
+    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(this.props.month) - 1,
+      day_array_views_index: parseInt(this.props.day) - 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 year = this.state.year_array[this.state.year_array_views_index];
+
+      var month = this.state.month_array[this.state.month_array_views_indexs];
+
+      var day = this.state.day_array[this.state.day_array_views_index];
+
+      this.props.birthdaycommit(year, month, day);
+      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/Comment.js

@@ -3,19 +3,31 @@ import {
   StyleSheet,
   Text,
   View,
-  Image
+  Image,
+  TextInput,
+  TouchableOpacity
 } from "react-native";
 
 export default class Comment extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { 
+      text: '',
+      input: false,
+      default: '写评论'
+    };
+  }
   render() {
     return (
       <View style={styles.courseComment}>
         <View style={[styles.padding, styles.title]}>
           <Text style={styles.font}>{this.props.title}</Text>
-          <View style={[ styles.button, styles.center ]}>
-            <Image source={require('../images/courseDetails/comment.png')} style={styles.iconSize} />
-            <Text>写评论</Text>
-          </View>
+          <TouchableOpacity onPress={() => this.comments()}>
+            <View style={[ styles.button, styles.center ]}>
+              <Image source={require('../images/courseDetails/comment.png')} style={styles.iconSize} />
+              <Text>写评论</Text>
+            </View>
+          </TouchableOpacity>
         </View>
         <View style={[ styles.padding ]}>
           <View style={[ styles.title ]}>
@@ -39,9 +51,31 @@ export default class Comment extends Component {
             <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
           </View>
         </View>
+        {
+            this.state.input ?
+            <View style={[ styles.input, this.state.fullStyle]}>
+            <TextInput
+              style={{height: '100%', borderColor: '#DFDFDF', borderWidth: 1, width: '90%', backgroundColor: '#fff', borderRadius: 6, padding: 0, textAlignVertical: 'top', padding: 10}}
+              onChangeText={(text) => this.setState({text})}
+              value={this.state.text}
+              numberOfLines={7}
+              multiline = {true}
+              autoFocus = {true}
+              defaultValue= {this.state.default}
+            />
+            <Text style={{ color: '#58A8FA', fontSize: 18}}>发送</Text>
+          </View>
+          :
+          null
+        }
       </View>
     );
   }
+  comments() {
+    this.setState({
+      input: true
+    })
+  }
 }
 
 const styles = StyleSheet.create({
@@ -90,8 +124,8 @@ const styles = StyleSheet.create({
     borderRadius: 40
   },
   iconSize: {
-    width: 18,
-    height: 18,
+    width: 20,
+    height: 20,
     marginRight: 10
   },
   reply: {
@@ -110,5 +144,18 @@ const styles = StyleSheet.create({
   },
   color: {
     color: '#518AD1'
+  },
+  input: {
+    width: '100%',
+    height: 124,
+    backgroundColor: '#F9F9F9',
+    paddingLeft: 18,
+    paddingTop: 18,
+    paddingBottom: 18,
+    paddingRight: 24,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end'
   }
 });

pages/components/CourseListRow.js

@@ -21,13 +21,13 @@ export default class CourseListRow extends Component {
       <View style={styles.courseList}>
         <View style={[styles.padding, styles.title]}>
           <Text style={styles.font}>{this.props.title}</Text>
-          <Text style={styles.color}>共28课</Text>
+          <Text style={styles.color}>共{this.props.wareList.length}课</Text>
         </View>
         <View style={{
             flex: 1,
             height: 200,
           }}>
-            <ScrollRow itemWidth={106} itemHeight={150} />
+            <ScrollRow itemWidth={106} itemHeight={150} data={this.props.wareList} type={ true } changeUri={ this.props.changeUri }/>
           </View>
       </View>
     );

pages/components/CusVideo.js

@@ -590,7 +590,7 @@ const styles = StyleSheet.create({
     alignItems: "center"
   },
   player_time: {
-    fontSize: 18,
+    fontSize: 16,
     color: "white",
     alignItems: "center",
     justifyContent: "center",

pages/components/GradeSelectionModal.js

@@ -32,6 +32,9 @@ type Props = {};
 export default class GradeSelectionModal extends Component<Props> {
   state = {
     modalVisible: false,
+    click_index: this.props.grade_index,
+    item_width: 0,
+    item_height: 0,
     grade_data: [
       "一年级",
       "二年级",
@@ -151,72 +154,79 @@ export default class GradeSelectionModal extends Component<Props> {
         style={{
           flex: 1,
           flexDirection: "column",
-          alignItems: "center"
+          alignItems: "center",
+          justifyContent: "center"
         }}
       >
         <View
           style={{
             flex: 1,
-            justifyContent: "space-between",
+            justifyContent: "space-evenly",
             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"
+            flexDirection: "row",
+            //换行显示
+            flexWrap: "wrap",
+            alignItems: "center"
           }}
+          onLayout={event => this.onLayout(event)}
         >
-          <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>
+          {this.centerItem()}
         </View>
-        <View
+      </View>
+    );
+  }
+  onLayout(event) {
+    // alert(event.nativeEvent.layout.width);
+    // alert(event.nativeEvent.layout.width / 3);
+    this.setState({
+      item_width: event.nativeEvent.layout.width / 3.5,
+      item_height: event.nativeEvent.layout.height / 3
+    });
+  }
+  centerItem() {
+    let arr = [];
+    for (let i = 0; i < this.state.grade_data.length; i++) {
+      let index = i;
+      let color = "";
+      if (this.state.click_index == i) {
+        color = "rgba(88, 168, 250, 1)";
+      } else {
+        color = "rgba(61, 192, 252, 0.15)";
+      }
+      arr[i] = (
+        <TouchableOpacity
+          activeOpacity={1}
+          key={i}
           style={{
-            flex: 1,
-            justifyContent: "space-between",
-            width: "90%",
-            flexDirection: "row"
+            margin: 1,
+            height: this.state.item_height,
+            alignItems: "center",
+            justifyContent: "center"
           }}
+          onPress={() => this.clickGrade(index)}
         >
-          <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
+            style={{
+              width: this.state.item_width,
+              height: this.state.item_height / 2,
+              backgroundColor: color,
+              borderRadius: 20
+            }}
+          >
+            <Text style={styles.item_text}>{this.state.grade_data[i]}</Text>
           </View>
-        </View>
-      </View>
-    );
-  }
+        </TouchableOpacity>
+      );
+    }
 
+    return arr;
+  }
   commit() {
-    alert("确定");
+    this.props.commitGrade(
+      this.state.grade_data[this.state.click_index],
+      this.state.click_index
+    );
+    this.setModalVisible(false);
   }
 
   setModalVisible(visible) {
@@ -224,20 +234,18 @@ export default class GradeSelectionModal extends Component<Props> {
       modalVisible: visible
     });
   }
-  clickGrade() {}
+  clickGrade(index) {
+    this.setState({
+      click_index: index
+    });
+  }
 }
 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
+    fontSize: 16
   }
 });

pages/components/MainPage.js

@@ -94,13 +94,13 @@ export default class MainPage extends BasePage {
         ?
         null
         :
-        <TouchableOpacity onPress={()=>this.switchGrade(index)} key={index} style={index === 1 ? styles.gradeItemMid : styles.gradeItem}>
+        <TouchableOpacity onPress={() => this.switchGrade(index)} key={index} style={index === 1 ? styles.gradeItemMid : styles.gradeItem}>
           <Text style={styles.gradeText}>{item.title}</Text>
         </TouchableOpacity>
     )
   }
 
-  switchGrade=(index)=>{
+  switchGrade = (index) => {
     const obj = this.state.switchList[index]
     this.setState({
       currentSwitch: obj
@@ -122,7 +122,7 @@ export default class MainPage extends BasePage {
           renderSectionHeader={this.sectionTitle}
           onScroll={this.hideGradeMenu}
         /> */}
-        <ScrollView style={{ height: Dimensions.height }} onScroll={this.hideGradeMenu} >
+        <ScrollView style={{ height: Dimensions.height }} showsVerticalScrollIndicator = {false} onScroll={this.hideGradeMenu} >
           {this.headerorfooterComponent()}
           {this.getSwiperElement()}
           {this.getScheduleElement()}
@@ -203,7 +203,7 @@ export default class MainPage extends BasePage {
     return (
       <View
         style={{
-          height: Dimensions.getDp(163),
+          height: Dimensions.getHeight(163),
           flex: 1,
           justifyContent: "center",
           alignItems: "center",
@@ -213,7 +213,7 @@ export default class MainPage extends BasePage {
         <View
           style={{
             width: Dimensions.getWidth(358),
-            height: Dimensions.getDp(153),
+            height: Dimensions.getHeight(153),
             justifyContent: "center",
             overflow: 'hidden'
           }}
@@ -233,7 +233,11 @@ export default class MainPage extends BasePage {
     let renderScheduleItem = (item, index) => {
       return (
         <TouchableOpacity
-          style={{ width: 172, height: 86, marginRight: 12 }}
+          style={{
+            width: Dimensions.getWidth(172),
+            height: Dimensions.getHeight(86),
+            marginRight: 12
+          }}
           onPress={() => this.toNextPage('SchedulePage')}
           key={index}
           activeOpacity={1}
@@ -259,7 +263,7 @@ export default class MainPage extends BasePage {
         style={{
           flex: 1,
           flexDirection: "column",
-          height: 160,
+          height: Dimensions.getHeight(160),
         }}
       >
         <TopicTitle title={'课程表：第一周'} ifTubeShow={true} />
@@ -419,7 +423,7 @@ const styles = StyleSheet.create({
   searchSection: {
     flex: 1,
     width: Dimensions.width,
-    height: 60,
+    height: Dimensions.getHeight(60),
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: '#f0f1f5',
@@ -427,14 +431,14 @@ const styles = StyleSheet.create({
     position: 'relative',
   },
   searchBox: {
-    width: 232,
-    height: 40,
+    width: Dimensions.getWidth(232),
+    height: Dimensions.getHeight(40),
     backgroundColor: '#fff',
     borderRadius: 20
   },
   rightBtn: {
-    width: 113,
-    height: 40,
+    width: Dimensions.getWidth(113),
+    height: Dimensions.getHeight(40),
     backgroundColor: '#fff',
     borderRadius: 20,
     alignItems: 'center',
@@ -445,8 +449,8 @@ const styles = StyleSheet.create({
     paddingRight: 10,
   },
   rightBtnIcon: {
-    width: 15,
-    height: 15
+    width: Dimensions.getWidth(23),
+    height: Dimensions.getHeight(23),
   },
   rightBtnText: {
     color: '#151515',

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";
@@ -33,20 +34,21 @@ import PersonalInfoDialog from "./PersonalInfoDialog";
 type Props = {};
 export default class PersonalInfo extends BasePage {
   state = {
+    updateNS_show: false,
     nickName: "初始昵称",
     schoolName: "未设置",
-    cisys: "北京市"
+    cisys: "北京市",
+    grade_text: "七年级",
+    grade_index: 6,
+    birthday_year: 0,
+    birthday_month: 0,
+    birthday_day: 0,
+    birthday_time: 0
   };
-  updateState(data) {
-    this.setState(data);
-  }
+
   render() {
     return (
       <View style={{ flex: 1 }}>
-        <PersonalInfoDialog
-          ref={view => (this.dialog = view)}
-          updateParentState={this.updateState.bind(this)}
-        />
         <ChosePhoto ref={view => (this.chosephoto = view)} />
         <RegionModal
           ref={view => (this.regionmodal = view)}
@@ -54,7 +56,15 @@ export default class PersonalInfo extends BasePage {
         />
         <GradeSelectionModal
           ref={view => (this.gradeselectionModal = view)}
-          cityscommit={this.cityscommit.bind(this)}
+          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} />
 
@@ -280,7 +290,7 @@ export default class PersonalInfo extends BasePage {
                       numberOfLines={1}
                       ellipsizeMode={"tail"}
                     >
-                      生日。。。。
+                      {this.state.birthday_time}
                     </Text>
                   </View>
                   <View
@@ -431,7 +441,7 @@ export default class PersonalInfo extends BasePage {
                       numberOfLines={1}
                       ellipsizeMode={"tail"}
                     >
-                      年级。。。
+                      {this.state.grade_text}
                     </Text>
                   </View>
                   <View
@@ -507,15 +517,27 @@ export default class PersonalInfo extends BasePage {
             <View style={{ flex: 0.8 }} />
           </View>
         </View>
+        <PersonalInfoDialog
+          ref={view => (this.dialog = view)}
+          updateNS_show={this.state.updateNS_show}
+          updateParentState={this.updateState.bind(this)}
+        />
       </View>
     );
   }
 
-  // userInfo123() {
-  //   return (
-
-  //   );
-  // }
+  componentWillMount() {
+    var date = new Date();
+    var year = date.getFullYear().toString();
+    var month = (date.getMonth() + 1).toString();
+    var day = date.getDate().toString();
+    this.setState({
+      birthday_year: year,
+      birthday_month: month,
+      birthday_day: day,
+      birthday_time: year + "年" + month + "月" + day + "日"
+    });
+  }
 
   getArraowImg(type) {
     return (
@@ -583,16 +605,23 @@ export default class PersonalInfo extends BasePage {
         this.chosephoto.setModalVisible(true);
         break;
       case 1:
+        this.setState({
+          updateNS_show: true
+        });
         this.dialog.setInfo("修改昵称", "昵称");
         this.dialog.setModalVisible(true, 1);
         break;
       case 2:
-        alert("生日");
+        // alert("生日");
+        this.birthdaymodal.setModalVisible(true);
         break;
       case 3:
         this.regionmodal.setModalVisible(true);
         break;
       case 4:
+        this.setState({
+          updateNS_show: true
+        });
         this.dialog.setInfo("我的学校", "学校名称");
         this.dialog.setModalVisible(true, 2);
         break;
@@ -605,10 +634,24 @@ export default class PersonalInfo extends BasePage {
   logout() {
     alert("点击退出了");
   }
+  updateState(data) {
+    this.setState(data);
+  }
 
   cityscommit(provinces_name, citys_name) {
     this.setState({
-      cisys: provinces_name + citys_name
+      cisys: provinces_name + "-" + citys_name
+    });
+  }
+  commitGrade(text, index) {
+    this.setState({
+      grade_text: text,
+      grade_index: index
+    });
+  }
+  birthdaycommit(year, month, day) {
+    this.setState({
+      birthday_time: year + "年" + month + "月" + day + "日"
     });
   }
 }
@@ -622,9 +665,9 @@ const styles = StyleSheet.create({
     marginTop: 1
   },
   item_text: {
-    flex: 2,
+    flex: 3,
     textAlignVertical: "center",
     color: "black",
-    fontSize: 20
+    fontSize: 16
   }
 });

pages/components/PersonalInfoDialog.js

@@ -50,6 +50,10 @@ export default class PersonalInfoDialog extends Component<Props> {
       placeholder: holder
     });
   }
+  cancel() {
+    let data = { updateNS_show: false };
+    this.props.updateParentState(data);
+  }
 
   touchDown() {
     this.setState({
@@ -75,27 +79,19 @@ export default class PersonalInfoDialog extends Component<Props> {
       touch_cancel_textcolor: "#58A8FA"
     });
   }
-  setParentState() {
+  setParentState(bool) {
     let data;
     if (this.state.updateType == 1) {
-      data = { nickName: this.state.input_text };
+      data = { nickName: this.state.input_text, updateNS_show: bool };
     } else if (this.state.updateType == 2) {
-      data = { schoolName: this.state.input_text };
+      data = { schoolName: this.state.input_text, updateNS_show: bool };
     }
     this.props.updateParentState(data);
-    this.setModalVisible(false);
   }
 
   render() {
-    return (
-      <Modal
-        animationType="fade"
-        transparent={true}
-        visible={this.state.modalVisible}
-        onRequestClose={() => {
-          this.setState({ modalVisible: false });
-        }}
-      >
+    if (this.props.updateNS_show) {
+      return (
         <View
           style={{
             flex: 1,
@@ -104,7 +100,8 @@ export default class PersonalInfoDialog extends Component<Props> {
             alignItems: "center",
             justifyContent: "center",
             backgroundColor: "rgba(0, 0, 0, 0.3)",
-            flexDirection: "row"
+            flexDirection: "row",
+            position: "absolute"
           }}
         >
           <View
@@ -187,7 +184,7 @@ export default class PersonalInfoDialog extends Component<Props> {
                     onPressIn={() => this.touchDown()}
                     onPressOut={() => this.touchUp()}
                     onPress={() => {
-                      this.setParentState();
+                      this.setParentState(false);
                     }}
                   >
                     <Text
@@ -216,7 +213,7 @@ export default class PersonalInfoDialog extends Component<Props> {
                     activeOpacity={1}
                     onPressIn={() => this.touchCancelDown()}
                     onPressOut={() => this.touchCancelUp()}
-                    onPress={() => this.setModalVisible(false)}
+                    onPress={() => this.cancel()}
                   >
                     <Text
                       style={{
@@ -236,7 +233,9 @@ export default class PersonalInfoDialog extends Component<Props> {
             </View>
           </View>
         </View>
-      </Modal>
-    );
+      );
+    } else {
+      return null;
+    }
   }
 }

pages/components/ScheduleFlatItem.js

@@ -43,7 +43,7 @@ export default class ScheduleFlatItem extends Component {
               style={{
                 flex: 2.5,
                 backgroundColor: this.props.data.subColor,
-                width: "95%",
+                width: "100%",
                 height: "70%",
                 alignItems: "center",
                 justifyContent: "center",
@@ -52,7 +52,7 @@ export default class ScheduleFlatItem extends Component {
             >
               <Text style={{ color: "white",fontSize: 12, }}>{this.props.data.subTitle}</Text>
             </View>
-            <View style={{ flex: 0.5 }} />
+            <View style={{ flex: 0.2 }} />
             <View
               style={{
                 flex: 10,

pages/components/ScrollRow.js

@@ -24,17 +24,16 @@ export default class ScrollRow extends Component {
     render() {
         return (
             <FlatList
-
                 data={this.props.data}
                 horizontal={true}
                 renderItem={({ item, separators }) => this.renderItem(item, separators)}
                 keyExtractor={(item, index) => index.toString()}
+                showsHorizontalScrollIndicator = {false}
             />
         )
     }
 
     renderItem(item, separators) {
-        console.log(this.toNextPage)
         const courseId = item.course ? item.course.id : item.operationContent;
         return (
             <TouchableOpacity
@@ -46,7 +45,7 @@ export default class ScrollRow extends Component {
                     alignItems: 'center',
                     marginLeft: 9,
                 }}
-                onPress={() => this.props.nav('CourseDetails', {courseId})}
+                onPress={() => this.playOrGoback(courseId, item.playUrl)}
                 activeOpacity={1}
             >
                 <View style={{
@@ -58,7 +57,7 @@ export default class ScrollRow extends Component {
                 }}>
                     <Image
                         source={{
-                            uri: item.zoneCourse ? item.zoneCourse.iconImg : item.boothContent
+                            uri: item.zoneCourse ? item.zoneCourse.iconImg : item.iconImg ? item.iconImg : item.boothContent
                             // uri: item.icon
                         }}
                         style={{
@@ -74,6 +73,12 @@ export default class ScrollRow extends Component {
                             {item.summary}
                         </Text>
                         :
+                        item.title
+                        ?
+                        <Text style={styles.itemSummary}>
+                            {item.title}
+                        </Text>
+                        :
                         null
                     }
 
@@ -82,6 +87,13 @@ export default class ScrollRow extends Component {
             </TouchableOpacity>
         )
     }
+    playOrGoback(courseId, playUrl) {
+        if (this.props.type) {
+            this.props.changeUri(playUrl)
+        } else {
+            this.props.nav('CourseDetails', {courseId})
+        }
+    }
 }
 
 const styles = StyleSheet.create({

pages/components/SharedDialog.js

@@ -138,6 +138,7 @@ export default class SharedDialog extends Component<Props> {
                 flex: 2,
                 backgroundColor: "white",
                 flexDirection: "row",
+                justifyContent: "center",
                 width: "100%"
               }}
             >
@@ -168,7 +169,7 @@ export default class SharedDialog extends Component<Props> {
                     />
                     <Text
                       style={{
-                        fontSize: 18,
+                        fontSize: 16,
                         color: "black"
                       }}
                     >
@@ -177,6 +178,7 @@ export default class SharedDialog extends Component<Props> {
                   </View>
                 </TouchableOpacity>
               </View>
+              <View style={{ flex: 0.3 }} />
               <View
                 style={{
                   flex: 1
@@ -203,7 +205,7 @@ export default class SharedDialog extends Component<Props> {
                     />
                     <Text
                       style={{
-                        fontSize: 18,
+                        fontSize: 16,
                         color: "black"
                       }}
                     >

pages/components/Swiper.js

@@ -28,7 +28,8 @@ export default class Swipers extends Component {
         horizontal={true}
         autoplayTimeout={5}
         autoplay={this.props.autoplay}
-        loop={this.props.loop}
+        // loop={this.props.loop}
+        loop={true}
         index={this.props.ifShowMiddle ? 1 : 0}
         activeDotColor="#fff"
         showsPagination={true}
@@ -59,14 +60,14 @@ const styles = StyleSheet.create({
     // flex: 1,
   },
   slide: {
-    width: Dimensions.getDp(352),
-    height: Dimensions.getDp(153),
+    width: Dimensions.getWidth(352),
+    height: Dimensions.getHeight(153),
     marginHorizontal: Dimensions.getDp(3),
     zIndex: 1
   },
   img: {
-    width: Dimensions.getDp(352),
-    height: Dimensions.getDp(153),
+    width: Dimensions.getWidth(352),
+    height: Dimensions.getHeight(153),
     borderRadius: Dimensions.getDp(10),
     zIndex: 1
   }

pages/components/VideoExplain.js

@@ -25,11 +25,6 @@ import { Dimensions } from 'react-native'
 const { height, width } =  Dimensions.get('window');
 
 export default class VideoExplain extends Component {
-  static propTypes = {
-    // uri: PropTypes.string,
-    // title: PropTypes.string,
-    // details: PropTypes.string,
-  };
   state = {
     isFull: false,
     video_height: 210,
@@ -38,7 +33,8 @@ export default class VideoExplain extends Component {
       width: "100%"
     },
     collectImage: require('../images/courseDetails/collect.png'),
-    isCollect: true
+    isCollect: true,
+    numberLine: 2
   };
 
   render() {
@@ -68,7 +64,7 @@ export default class VideoExplain extends Component {
         />
         <View style={styles.videoExplain}>
           <View style={styles.title}>
-            <Text style={styles.font}>{this.props.dataList}</Text>
+            <Text style={styles.font}>{this.props.dataList.title}</Text>
             <View style={styles.icon}>
               <TouchableOpacity onPress={this.collection.bind(this)}>
                 <Image source={this.state.collectImage} style={styles.iconSize} />
@@ -80,9 +76,9 @@ export default class VideoExplain extends Component {
           </View>
           <View style={[styles.title, styles.tops]}>
             <Text style={styles.font}>课程介绍：</Text>
-            <Text style={styles.clor}>更多 ></Text>
+            <Text style={styles.clor} onPress={() => this.open()}>更多 ></Text>
           </View>
-          <Text style={styles.clor}>{this.props.details}</Text>
+          <Text style={[ styles.clor, styles.introduce]} numberOfLines={this.state.numberLine}>{this.props.dataList.description}</Text>
         </View>
       </View>
     );
@@ -125,6 +121,9 @@ export default class VideoExplain extends Component {
   back(){
     this.props.videoback();
   }
+  start(){
+    this.video.start();
+  }
   componentWillMount() {
     this.backlistener=BackHandler.addEventListener(
       "hardwareBackPress",
@@ -167,6 +166,12 @@ export default class VideoExplain extends Component {
   share() {
     alert('点击分享')
   }
+  // 点击更多展开说明
+  open() {
+    this.setState({
+      numberLine: 10
+    })
+  }
 }
 
 const styles = StyleSheet.create({
@@ -205,5 +210,8 @@ const styles = StyleSheet.create({
   },
   tops: {
     marginTop: 18
+  },
+  introduce: {
+    marginTop: 5
   }
 });