'弹窗动画效果优化'

pages/CourseDetails.js

@@ -21,11 +21,23 @@ import CourseListRow from './components/CourseListRow'
 import CourseListLine from './components/CourseListLine'
 import Comment from './components/Comment'
 import Order from './components/Order'
+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)
+      this.setState({
+        courseList: 222
+      })
+    });
+  }
   state = {
     fullStyle: {},
-    lefts: 0
+    lefts: 0,
+    courseList: 111
   }
   render() {
     return (
@@ -37,6 +49,8 @@ export default class CourseDetails extends Component {
             title={'同步辅导语文一年级下册'}
             details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
             uri={'http://chimee.org/vod/1.mp4'}
+            dataList={ this.state.courseList }
+            videoback={this.back.bind(this) } 
             />
           </View>
           <View style={ this.state.fullStyle }>
@@ -49,6 +63,9 @@ export default class CourseDetails extends Component {
       </View>
     );
   }
+  back(){
+    this.props.navigation.goBack()
+  }
   full(isFull){
     if(isFull) {
       // 全屏时隐藏多余的view

pages/components/ChosePhoto.js

@@ -0,0 +1,200 @@
+/**
+ * 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,
+  TouchableHighlight,
+  DeviceEventEmitter
+} from "react-native";
+
+type Props = {};
+export default class ChosePhoto extends Component<Props> {
+  state = {
+    modalVisible: false
+  };
+
+  setModalVisible(visible) {
+    this.setState({
+      modalVisible: visible
+    });
+  }
+
+  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: 2.5,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              width: "100%"
+            }}
+            activeOpacity={1}
+            onPress={() => this.setState({ modalVisible: false })}
+          >
+            <View
+              style={{
+                flex: 2,
+                width: "100%"
+              }}
+            />
+          </TouchableOpacity>
+          <View
+            style={{
+              flex: 1,
+              width: "100%",
+              flexDirection: "column",
+              alignItems: "center",
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              justifyContent: "center"
+            }}
+          >
+            <View
+              style={{
+                flex: 2,
+                width: "90%",
+                backgroundColor: "white",
+                borderRadius: 20,
+                flexDirection: "column"
+              }}
+            >
+              <TouchableOpacity
+                style={{
+                  flex: 5,
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+                activeOpacity={1}
+                onPress={this.photograph.bind(this)}
+              >
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }}
+                >
+                  <Text
+                    style={{ fontSize: 22, color: "rgba(88, 168, 250, 1)" }}
+                  >
+                    拍照
+                  </Text>
+                </View>
+              </TouchableOpacity>
+              <View
+                style={{
+                  flex: 0.1,
+                  backgroundColor: "rgba(246, 247, 248, 1)"
+                }}
+              />
+              <TouchableOpacity
+                style={{
+                  flex: 5,
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+                activeOpacity={1}
+                onPress={this.album_selection.bind(this)}
+              >
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }}
+                >
+                  <Text
+                    style={{ fontSize: 22, color: "rgba(88, 168, 250, 1)" }}
+                  >
+                    从相册选择
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            <View
+              style={{
+                flex: 0.1,
+                width: "100%"
+              }}
+            />
+            <TouchableOpacity
+              style={{
+                flex: 1,
+                width: "90%",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: 20,
+                backgroundColor: "white"
+              }}
+              activeOpacity={1}
+              onPress={() => {
+                this.setState({ modalVisible: false });
+              }}
+            >
+              <View
+                style={{
+                  flex: 1,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 20,
+                  backgroundColor: "white"
+                }}
+              >
+                <Text
+                  style={{
+                    //   fontWeight: "bold",
+                    fontSize: 22,
+                    color: "rgba(88, 168, 250, 1)"
+                  }}
+                >
+                  取消
+                </Text>
+              </View>
+            </TouchableOpacity>
+            <View
+              style={{
+                flex: 0.1,
+                width: "100%"
+              }}
+            />
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+  photograph() {
+    alert("拍照");
+  }
+
+  album_selection() {
+    alert("相册选择");
+  }
+}

pages/components/Comment.js

@@ -13,7 +13,7 @@ export default class Comment extends Component {
         <View style={[styles.padding, styles.title]}>
           <Text style={styles.font}>{this.props.title}</Text>
           <View style={[ styles.button, styles.center ]}>
-            <Image src="" style={styles.iconSize} />
+            <Image source={require('../images/courseDetails/comment.png')} style={styles.iconSize} />
             <Text>写评论</Text>
           </View>
         </View>
@@ -27,7 +27,7 @@ export default class Comment extends Component {
                 </View>
             </View>
             <View style={[ styles.center ]}>
-              <Image src="" style={styles.iconSize} />
+              <Image source={require('../images/courseDetails/reply.png')} style={styles.reply} />
               <Text>回复</Text>
             </View>
           </View>
@@ -49,6 +49,7 @@ const styles = StyleSheet.create({
     width: '100%',
     backgroundColor: '#fff',
     marginTop: 8,
+    marginBottom: 60
   },
   padding: {
     paddingLeft: 20,
@@ -89,11 +90,15 @@ const styles = StyleSheet.create({
     borderRadius: 40
   },
   iconSize: {
-    width: 20,
-    height: 20,
-    backgroundColor: "red",
+    width: 18,
+    height: 18,
     marginRight: 10
   },
+  reply: {
+    width: 16,
+    height: 15,
+    marginRight: 5
+  },
   courseFont: {
     color: '#373737',
     fontSize: 16

pages/components/CourseTitle.js

@@ -134,6 +134,8 @@ export default class CourseTitle extends Component<Props> {
         //个人中心，右侧是设置
         right = require("../images/common/setting.png");
         break;
+      default:
+        return true;
     }
     return (
       <Image

pages/components/CusVideo.js

@@ -187,6 +187,9 @@ export default class CusVideo extends React.Component {
       }
     });
   }
+  componentWillUnmount() {
+    clearTimeout(this.time_hideController);
+  }
 
   loadStart() {
     // alert("loadStart");
@@ -208,13 +211,13 @@ export default class CusVideo extends React.Component {
   onLoad = data => {
     //获取的是秒数
     this.setState({ duration: data.duration });
-    this.bottomcontroller.setMax(data.duration);
+    // this.bottomcontroller.setMax(data.duration);
   };
   onProgress = data => {
     this.setState({
       currentTime: data.currentTime
     });
-    if (this.state.show_controller) {
+    if (this.state.show_controller && this.props.show) {
       this.bottomcontroller.setProgress(this.state.currentTime);
       this.bottomcontroller.setMax(this.state.duration);
     }
@@ -333,9 +336,13 @@ export default class CusVideo extends React.Component {
       show_controller: false
       // needback: false
     });
+
     this.bottomcontroller.setBottom(-50);
     this.topcontroller.setTop(-50);
   }
+  componentWillUnmount() {
+    clearTimeout(this.time_hideController);
+  }
 }
 
 /**
@@ -439,9 +446,12 @@ class Loading extends Component {
   componentWillMount() {
     this.changeIndex();
   }
+  componentWillUnmount() {
+    clearTimeout(this.changeindex);
+  }
 
   changeIndex() {
-    setTimeout(() => {
+    this.changeindex = setTimeout(() => {
       if (this.loading_index > this.props.loading_arr.length - 2) {
         this.loading_index = 0;
       } else {

pages/components/PersonalInfo.js

@@ -24,6 +24,8 @@ import {
 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";
 
@@ -31,7 +33,8 @@ type Props = {};
 export default class PersonalInfo extends BasePage {
   state = {
     nickName: "初始昵称",
-    schoolName: "未设置"
+    schoolName: "未设置",
+    cisys: "北京市"
   };
   updateState(data) {
     this.setState(data);
@@ -43,12 +46,12 @@ export default class PersonalInfo extends BasePage {
           ref={view => (this.dialog = view)}
           updateParentState={this.updateState.bind(this)}
         />
-        <StatusBar
-          backgroundColor={"transparent"}
-          barStyle={"dark-content"}
-          backgroundColor={"white"}
-          translucent={false}
+        <ChosePhoto ref={view => (this.chosephoto = view)} />
+        <RegionModal
+          ref={view => (this.regionmodal = view)}
+          cityscommit={this.cityscommit.bind(this)}
         />
+        <StatusBar backgroundColor={"transparent"} translucent={true} />
 
         <View
           style={{
@@ -59,12 +62,12 @@ export default class PersonalInfo extends BasePage {
           <ImageBackground
             source={require("../images/userInfo/top.png")}
             style={{
-              flex: 5,
+              flex: 2.8,
               width: "100%",
               backgroundColor: "#F0F1F5",
-              height: "73%"
+              height: "75%"
             }}
-            imageStyle={{ resizeMode: "contain" }}
+            imageStyle={{ resizeMode: "cover" }}
           >
             <View
               style={{
@@ -75,81 +78,371 @@ export default class PersonalInfo extends BasePage {
               }}
             >
               <CourseTitle
-                style={{ flex: 1 }}
+                style={{ flex: 4 }}
                 width={this.getWindowWidth()}
                 title="个人信息"
                 backPress={() => this.goBack()}
                 lefttype={2}
+                righttype={0}
                 textcolor={"white"}
                 backPress={() => this.goBack()}
               />
-              <View
+
+              <TouchableOpacity
                 style={{
-                  flex: 1.5,
+                  flex: 1,
                   backgroundColor: "white",
                   width: "90%",
+                  bottom: 0,
                   alignItems: "center",
                   justifyContent: "center",
                   borderRadius: 20,
                   overflow: "hidden"
                 }}
+                activeOpacity={1}
+                onPress={() => this.arrowpress(0)}
               >
-                <Header
-                  uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&amp;fm=26&amp;gp=0.jpg"
-                  username="卡通笨笨熊"
-                  flowerNumber="123234"
-                  onPress={() => this.toNextPage("MainActivity")}
-                />
-              </View>
+                <View
+                  style={{
+                    flex: 1,
+                    borderRadius: 20,
+                    overflow: "hidden",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexDirection: "row"
+                  }}
+                >
+                  <View style={{ flex: 0.5 }} />
+
+                  <View
+                    style={{
+                      flex: 3,
+                      height: "100%",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    }}
+                  >
+                    <Image
+                      style={{
+                        borderRadius: 50,
+                        width: "80%",
+                        height: "70%"
+                        // borderWidth: 3
+                        // borderColor: "red"
+                      }}
+                      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"
+                      }}
+                    />
+                  </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)}
+                  </View>
+                </View>
+              </TouchableOpacity>
             </View>
           </ImageBackground>
-
-          <View style={{ flex: 0.1, backgroundColor: "#F0F1F5" }} />
+          <View style={{ flex: 0.5, backgroundColor: "#F0F1F5" }} />
           <View
             style={{
               width: "100%",
-              flex: 4.1,
+              flex: 4.3,
               alignItems: "center",
-              justifyContent: "center",
               backgroundColor: "#F0F1F5"
             }}
           >
             <View
               style={{
-                backgroundColor: "#F3F3F3",
+                backgroundColor: "rgb(242, 242, 242)",
                 width: "90%",
                 alignItems: "center",
                 justifyContent: "center",
-                height: "90%",
+                height: "100%",
                 overflow: "hidden",
-                borderRadius: 20
+                borderRadius: 10
               }}
             >
-              {this.userInfo123()}
-            </View>
-          </View>
-          <View style={{ flex: 0.1, backgroundColor: "#F0F1F5" }} />
-          <View
-            style={{
-              width: "100%",
-              alignItems: "center",
-              justifyContent: "center",
-              flex: 4.1,
-              backgroundColor: "#F0F1F5"
-            }}
-          >
-            <View
-              style={{
-                backgroundColor: "#F3F3F3",
-                width: "90%",
-                height: "90%",
-                overflow: "hidden",
-                borderRadius: 20
-              }}
-            >
-              {this.userInfo456()}
+              <View
+                style={{
+                  width: "100%",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  height: "100%"
+                }}
+              >
+                <TouchableOpacity
+                  style={{
+                    flex: 1,
+                    marginVertical: 1,
+                    width: "100%",
+                    flexDirection: "row",
+                    backgroundColor: "white"
+                  }}
+                  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
+                    style={{
+                      flex: 5,
+                      alignItems: "flex-end"
+                    }}
+                  >
+                    <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,
+                    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
+                      style={{
+                        flex: 1,
+                        fontSize: 15,
+                        textAlignVertical: "center"
+                      }}
+                      numberOfLines={1}
+                      ellipsizeMode={"tail"}
+                    >
+                      生日。。。。
+                    </Text>
+                  </View>
+                  <View
+                    style={{
+                      flex: 1.1,
+                      alignItems: "center",
+                      justifyContent: "center"
+                    }}
+                  >
+                    {this.getArraowImg(2)}
+                  </View>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={{
+                    flex: 1,
+                    width: "100%",
+                    flexDirection: "row",
+                    backgroundColor: "white",
+                    marginVertical: 1
+                  }}
+                  activeOpacity={1}
+                  onPress={() => this.arrowpress(3)}
+                >
+                  <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
+                      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: 1,
+                    width: "100%",
+                    flexDirection: "row",
+                    backgroundColor: "white",
+                    marginVertical: 1
+                  }}
+                  activeOpacity={1}
+                  onPress={() => this.arrowpress(4)}
+                >
+                  <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
+                      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: 1,
+                    marginTop: 1,
+                    width: "100%",
+                    flexDirection: "row",
+                    backgroundColor: "white",
+                    marginVertical: 1
+                  }}
+                  activeOpacity={1}
+                  onPress={() => this.arrowpress(5)}
+                >
+                  <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
+                      style={{
+                        flex: 1.1,
+                        fontSize: 15,
+                        textAlignVertical: "center"
+                      }}
+                      numberOfLines={1}
+                      ellipsizeMode={"tail"}
+                    >
+                      年级。。。
+                    </Text>
+                  </View>
+                  <View
+                    style={{
+                      flex: 1.1,
+                      alignItems: "center",
+                      justifyContent: "center"
+                    }}
+                  >
+                    {this.getArraowImg(5)}
+                  </View>
+                </TouchableOpacity>
+              </View>
             </View>
           </View>
+
           <View
             style={{
               width: "100%",
@@ -158,8 +451,8 @@ export default class PersonalInfo extends BasePage {
               flexDirection: "column"
             }}
           >
-            <View style={{ flex: 0.5 }} />
-            <View style={{ flex: 1, flexDirection: "row" }}>
+            <View style={{ flex: 2.5 }} />
+            <View style={{ flex: 2, flexDirection: "row" }}>
               <View style={{ flex: 1 }} />
               <View
                 style={{
@@ -171,7 +464,7 @@ export default class PersonalInfo extends BasePage {
                 <TouchableOpacity
                   activeOpacity={1}
                   style={{
-                    flex: 1,
+                    flex: 2,
                     width: "100%",
                     alignItems: "center",
                     justifyContent: "center",
@@ -184,7 +477,6 @@ export default class PersonalInfo extends BasePage {
                     style={{
                       flex: 1,
                       width: "100%",
-                      resizeMode: "repeat",
                       alignItems: "center",
                       justifyContent: "center",
                       height: "100%"
@@ -207,176 +499,19 @@ export default class PersonalInfo extends BasePage {
               </View>
               <View style={{ flex: 1 }} />
             </View>
+            <View style={{ flex: 0.5 }} />
           </View>
         </View>
       </View>
     );
   }
 
-  userInfo123() {
-    return (
-      <View
-        style={{
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100%"
-        }}
-      >
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(0)}
-          </View>
-
-          <Text style={styles.item_text}>头像</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(0)}
-          </View>
-        </View>
-        <View style={{ flex: 0.05 }} />
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(1)}
-          </View>
-
-          <Text style={styles.item_text}>{this.state.nickName}</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(1)}
-          </View>
-        </View>
-        <View style={{ flex: 0.05 }} />
-
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(2)}
-          </View>
-
-          <Text style={styles.item_text}>生日</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(2)}
-          </View>
-        </View>
-      </View>
-    );
-  }
-
-  userInfo456() {
-    return (
-      <View
-        style={{
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100%"
-        }}
-      >
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(3)}
-          </View>
-
-          <Text style={styles.item_text}>所在地区</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(3)}
-          </View>
-        </View>
-        <View style={{ flex: 0.05 }} />
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(4)}
-          </View>
+  // userInfo123() {
+  //   return (
 
-          <Text style={styles.item_text}>{this.state.schoolName}</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(4)}
-          </View>
-        </View>
-        <View style={{ flex: 0.05 }} />
-        <View style={styles.item}>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.choseheadericon(5)}
-          </View>
+  //   );
+  // }
 
-          <Text style={styles.item_text}>我的年级</Text>
-          <View
-            style={{
-              flex: 2,
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            {this.getArraowImg(5)}
-          </View>
-        </View>
-      </View>
-    );
-  }
   getArraowImg(type) {
     return (
       <TouchableOpacity
@@ -384,6 +519,8 @@ export default class PersonalInfo extends BasePage {
           width: "100%",
           height: "100%",
           alignItems: "center",
+
+          resizeMode: "contain",
           justifyContent: "center"
         }}
         onPress={() => this.arrowpress(type)}
@@ -438,7 +575,7 @@ export default class PersonalInfo extends BasePage {
   arrowpress(type) {
     switch (type) {
       case 0:
-        alert("点击头像");
+        this.chosephoto.setModalVisible(true);
         break;
       case 1:
         this.dialog.setInfo("修改昵称", "昵称");
@@ -448,7 +585,7 @@ export default class PersonalInfo extends BasePage {
         alert("生日");
         break;
       case 3:
-        alert("所在地区");
+        this.regionmodal.setModalVisible(true);
         break;
       case 4:
         this.dialog.setInfo("我的学校", "学校名称");
@@ -463,6 +600,12 @@ export default class PersonalInfo extends BasePage {
   logout() {
     alert("点击退出了");
   }
+
+  cityscommit(provinces_name, citys_name) {
+    this.setState({
+      cisys: provinces_name + citys_name
+    });
+  }
 }
 
 const styles = StyleSheet.create({
@@ -470,11 +613,11 @@ const styles = StyleSheet.create({
     flex: 1,
     width: "100%",
     flexDirection: "row",
-    backgroundColor: "white"
+    backgroundColor: "white",
+    marginTop: 1
   },
   item_text: {
-    flex: 10,
-    marginLeft: 10,
+    flex: 2,
     textAlignVertical: "center",
     color: "black",
     fontSize: 20

pages/components/RegionModal.js

@@ -0,0 +1,340 @@
+/**
+ * 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.05,
+                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()}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {this.scroll_item()}
+                </ScrollView>
+              </View>
+              <View
+                style={{
+                  flex: 1
+                }}
+              >
+                <ScrollView
+                  ref={view => (this.city_scroll = view)}
+                  onLayout={() => this.city_onlayout()}
+                  style={{
+                    flex: 1
+                  }}
+                  showsVerticalScrollIndicator={false}
+                >
+                  {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"
+  }
+});

pages/components/SchedulePage.js

@@ -53,7 +53,7 @@ export default class SchedulePage extends BasePage {
       videoImage_y: 0.0,
       video_uri:
         "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4",
-      title_height: "6%",
+      title_height: "9%",
       video_frame_height: "32%",
       seat_height: "2%",
       flatlist_height: "60%",
@@ -264,26 +264,21 @@ export default class SchedulePage extends BasePage {
   }
 
   componentWillMount() {
-    BackHandler.addEventListener(
-      "hardwareBackPress",
-      this.onBackAndroid.bind(this)
-    );
+    BackHandler.addEventListener("hardwareBackPress", this.onBackAndroid);
   }
   componentWillUnmount() {
-    BackHandler.removeEventListener(
-      "hardwareBackPress",
-      this.onBackAndroid.bind(this)
-    );
+    BackHandler.removeEventListener("hardwareBackPress", this.onBackAndroid);
   }
   showSharedDialog() {
+    this.video.pause();
     this.shareddialog.setModalVisible(true);
   }
-  onBackAndroid() {
+  onBackAndroid = () => {
     if (this.state.isFull) {
       return true;
     } else {
     }
-  }
+  };
   onError() {
     alert("播放器异常");
     this.setState({
@@ -292,6 +287,9 @@ export default class SchedulePage extends BasePage {
   }
   onEnd() {
     alert("播放结束");
+    this.setState({
+      video_show: false
+    });
     this.video.refreshVideo();
   }
   fullScreenPlayer() {

pages/components/ScrollRow.js

@@ -34,6 +34,7 @@ export default class ScrollRow extends Component {
 
     renderItem(item, separators) {
         console.log(this.toNextPage)
+        const courseId = item.course ? item.course.id : item.operationContent;
         return (
             <TouchableOpacity
                 style={{
@@ -44,7 +45,7 @@ export default class ScrollRow extends Component {
                     alignItems: 'center',
                     marginLeft: 9,
                 }}
-                onPress={() => this.props.nav('CourseDetails')}
+                onPress={() => this.props.nav('CourseDetails', {courseId})}
                 activeOpacity={1}
             >
                 <View style={{

pages/components/VideoExplain.js

@@ -15,7 +15,8 @@ import {
   ScrollView,
   StatusBar,
   BackHandler,
-  FlatList
+  FlatList,
+  TouchableOpacity 
 } from "react-native";
 import Orientation from "react-native-orientation";
 import CusVideo from "./CusVideo";
@@ -35,7 +36,9 @@ export default class VideoExplain extends Component {
     statusbar_hidden: false,
     videoStyle: {
       width: "100%"
-    }
+    },
+    collectImage: require('../images/courseDetails/collect.png'),
+    isCollect: true
   };
 
   render() {
@@ -54,7 +57,7 @@ export default class VideoExplain extends Component {
           uri={this.props.uri} //播放路径
           ref={view => (this.video = view)} //设置ID
           needback={true}
-          videoback={() => alert("videoback")}
+          videoback={this.back.bind(this)}
           videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
           onError={this.onError.bind(this)}
           onEnd={this.onEnd.bind(this)}
@@ -65,10 +68,14 @@ export default class VideoExplain extends Component {
         />
         <View style={styles.videoExplain}>
           <View style={styles.title}>
-            <Text style={styles.font}>{this.props.title}</Text>
+            <Text style={styles.font}>{this.props.dataList}</Text>
             <View style={styles.icon}>
-              <Image src="" style={styles.iconSize} />
-              <Image src="" style={styles.iconSize} />
+              <TouchableOpacity onPress={this.collection.bind(this)}>
+                <Image source={this.state.collectImage} style={styles.iconSize} />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={this.share}>
+                <Image source={require('../images/courseDetails/share.png')} style={styles.iconSize} />
+              </TouchableOpacity>
             </View>
           </View>
           <View style={[styles.title, styles.tops]}>
@@ -80,6 +87,7 @@ export default class VideoExplain extends Component {
       </View>
     );
   }
+  // 全屏播放
   fullScreenPlayer() {
     if (!this.state.isFull) {
       Orientation.lockToLandscape();
@@ -105,32 +113,60 @@ export default class VideoExplain extends Component {
     }
     this.props.full(this.state.isFull);
   }
+  // 播放器异常
   onError() {
     alert("播放器异常");
   }
+  // 播放结束
   onEnd() {
     alert("播放结束");
     this.video.refreshVideo();
   }
+  back(){
+    this.props.videoback();
+  }
   componentWillMount() {
-    BackHandler.addEventListener(
+    this.backlistener=BackHandler.addEventListener(
       "hardwareBackPress",
       this.onBackAndroid
     );
   }
   componentWillUnmount() {
-    BackHandler.removeEventListener(
-      "hardwareBackPress",
-      this.onBackAndroid
-    );
+    console.log("componentWillUnmount")
+    if( this.backlistener){
+      BackHandler.removeEventListener(
+        "hardwareBackPress",
+        this.onBackAndroid
+      );
+    }
+ 
   }
-  onBackAndroid = () => {
+  // 播放器返回
+  onBackAndroid=() => {
     if (this.state.isFull) {
       return true;
     } else {
       alert("返回。。。");
     }
   }
+  // 收藏
+  collection() {
+    if (this.state.isCollect) {
+      this.setState({
+        collectImage: require('../images/courseDetails/have_collect.png'),
+        isCollect: false
+      })
+    }else {
+      this.setState({
+        collectImage: require('../images/courseDetails/collect.png'),
+        isCollect: true
+      })
+    }
+  }
+  // 分享
+  share() {
+    alert('点击分享')
+  }
 }
 
 const styles = StyleSheet.create({
@@ -165,7 +201,6 @@ const styles = StyleSheet.create({
   iconSize: {
     width: 20,
     height: 20,
-    backgroundColor: "red",
     marginLeft: 10
   },
   tops: {

pages/services/courseDetails.js

@@ -0,0 +1,8 @@
+import APIConfig from './api.js';
+import efunRequest from '../utils/efunRequest'
+
+export default class CourseDetails {
+    static getCourseDetails(courseId) {
+      return efunRequest.getHttpRequest().url(`http://ott80testlibrary.yifangjiaoyu.cn/mobile/course/${courseId}`).get();
+    }
+}