合并代码

App.js

@@ -23,13 +23,6 @@ import SchoolAge from "./pages/components/SchoolAge";
 import MainPage from "./pages/components/MainPage";
 import SchedulePage from "./pages/components/SchedulePage";
 import PersonalInfo from "./pages/components/PersonalInfo";
-import CourseDetails from './pages/CourseDetails'
-const instructions = Platform.select({
-  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
-  android:
-    "Double tap R on your keyboard to reload,\n" +
-    "Shake or press menu button for dev menu"
-});
 
 const RootNavigator = createStackNavigator(
   {

android/app/release/output.json

@@ -0,0 +1 @@
+[{"outputType":{"type":"APK"},"apkInfo":{"type":"MAIN","splits":[],"versionCode":80000,"versionName":"8.0.0","enabled":true,"outputFile":"app-release.apk","fullName":"release","baseName":"release"},"path":"app-release.apk","properties":{}}]

package-lock.json

@@ -6953,6 +6953,11 @@
         "prop-types": "^15.5.10"
       }
     },
+    "react-native-program-stylesheet": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npm.taobao.org/react-native-program-stylesheet/download/react-native-program-stylesheet-1.0.8.tgz",
+      "integrity": "sha1-65vUGT1WZwTJMKsC0pEOtZmJT70="
+    },
     "react-native-safe-area-view": {
       "version": "0.13.1",
       "resolved": "https://registry.npm.taobao.org/react-native-safe-area-view/download/react-native-safe-area-view-0.13.1.tgz",

pages/BasePage.js

@@ -21,6 +21,7 @@ import {
 } from "react-native";
 import AndroidUtil from "../util/AndroidUtil";
 
+
 const instructions = Platform.select({
   ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
   android:

pages/components/CourseTitle.js

@@ -66,7 +66,7 @@ export default class CourseTitle extends Component<Props> {
             <Text
               style={{
                 width: "100%",
-                fontSize: 18,
+                fontSize: 20,
                 fontWeight: "bold",
                 color: this.props.textcolor,
                 textAlign: "center"
@@ -98,32 +98,27 @@ export default class CourseTitle extends Component<Props> {
 
   selectleftIcon() {
     let type = this.props.lefttype;
+    let back = "";
     switch (type) {
       case 1:
         //左侧返回图片1
-        return (
-          <Image
-            style={{
-              width: 20,
-              height: 20,
-              backgroundColor: "blue"
-            }}
-          />
-        );
+        back = require("../images/back_white.png");
         break;
       case 2:
         //左侧返回图片2
-        return (
-          <Image
-            style={{
-              width: 20,
-              height: 20,
-              backgroundColor: "red"
-            }}
-          />
-        );
+        back = require("../images/back_white.png");
         break;
     }
+    return (
+      <Image
+        source={back}
+        style={{
+          width: 20,
+          height: 20,
+          resizeMode: "contain"
+        }}
+      />
+    );
   }
   selectRightIcon() {
     let type = this.props.righttype;

pages/components/CusVideo.js

@@ -27,7 +27,7 @@ export default class CusVideo extends React.Component {
     resizeMode: "stretch",
     duration: 0.0,
     currentTime: 0.0,
-    paused: true,
+    paused: false,
     wheel: false
   };
 
@@ -39,7 +39,12 @@ export default class CusVideo extends React.Component {
           source={{
             uri: this.props.uri
           }}
+          ref={ref => {
+            this.player = ref;
+          }}
+          // poster={this.props.poster}
           resizeMode={this.state.resizeMode}
+          // posterResizeMode={this.state.resizeMode}
           rate={this.state.rate} //播放速率
           paused={this.state.paused} //暂停
           volume={this.state.volume} //调节音量
@@ -52,6 +57,9 @@ export default class CusVideo extends React.Component {
           onAudioBecomingNoisy={this.onAudioBecomingNoisy} //音频变得嘈杂时的回调 - 应暂停视频
           onAudioFocusChanged={this.onAudioFocusChanged} //音频焦点丢失时的回调 - 如果焦点丢失则暂停
           repeat={this.state.wheel} //确定在到达结尾时是否重复播放视频。
+          onError={this.onError} // 当视频不能加载，或出错后的回调函数
+          playInBackground={false} // 当app转到后台运行的时候，播放是否暂停
+          playWhenInactive={true} // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
         />
         <View style={[styles.player_controller]}>
           <View
@@ -106,13 +114,22 @@ export default class CusVideo extends React.Component {
               {formatTime(this.state.duration)}
             </Text>
           </View>
+          <TouchableOpacity
+            style={{ flex: 1 }}
+            onPress={() => this.presentFullscreenPlayer()}
+          >
+            <View style={{ flex: 1 }}>
+              {/* //放大按钮 */}
+              <Image style={[styles.player_pause_icon]} />
+            </View>
+          </TouchableOpacity>
         </View>
       </View>
     );
   }
 
   loadStart() {
-    // alert("准备加载视频");
+    // alert("loadStart");
   }
   onLoad = data => {
     //获取的是秒数
@@ -123,6 +140,13 @@ export default class CusVideo extends React.Component {
       currentTime: data.currentTime
     });
   };
+
+  onError() {
+    alert("播放器异常");
+  }
+  onEnd() {
+    alert("播放结束");
+  }
   play() {
     if (this.state.paused) {
       this.start();
@@ -142,6 +166,11 @@ export default class CusVideo extends React.Component {
     // ToastExample.message(params);
     ToastExample.show(params, ToastExample.SHORT);
   }
+  presentFullscreenPlayer() {
+    // alert("点击调用全屏");
+    this.props.videofullScreenPlayer();
+    // this.player.presentFullscreenPlayer();
+  }
 
   refreshVideo() {
     this.setState({
@@ -158,8 +187,7 @@ const styles = StyleSheet.create({
     width: "100%",
     height: 50,
     alignItems: "center",
-    bottom: 0,
-    backgroundColor: "powderblue"
+    bottom: 0
   },
   player_pause_icon: {
     width: "100%",
@@ -170,8 +198,8 @@ const styles = StyleSheet.create({
     backgroundColor: "blue"
   },
   player_time: {
-    backgroundColor: "red",
-    fontSize: 30,
+    fontSize: 18,
+    color: "white",
     alignItems: "center",
     justifyContent: "center",
     textAlignVertical: "center",

pages/components/Header.js

@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
     height: 72,
     flex: 1,
     alignItems: "center",
-    backgroundColor: 'red',
+    // backgroundColor: 'red',
     justifyContent: "center",
     flexDirection: "row"
   },

pages/components/PersonalInfo.js

@@ -17,26 +17,44 @@ import {
   ImageBackground,
   Button,
   StatusBar,
+  Modal,
+  TouchableHighlight,
   DeviceEventEmitter
 } from "react-native";
 import AndroidUtil from "../../util/AndroidUtil";
 import BasePage from "../BasePage";
 import CourseTitle from "./CourseTitle";
 import Header from "./Header";
+import PersonalInfoDialog from "./PersonalInfoDialog";
 
 type Props = {};
 export default class PersonalInfo extends BasePage {
+  state = {
+    nickName: "初始昵称",
+    schoolName: "未设置"
+  };
+  updateState(data) {
+    this.setState(data);
+  }
   render() {
     return (
       <View style={{ flex: 1 }}>
+        <PersonalInfoDialog
+          ref={view => (this.dialog = view)}
+          updateParentState={this.updateState.bind(this)}
+        />
         <StatusBar
-          // backgroundColor={"transparent"}
+          backgroundColor={"transparent"}
           barStyle={"dark-content"}
           backgroundColor={"white"}
           translucent={false}
         />
 
-        <ImageBackground style={{ flex: 1, backgroundColor: "blue" }}>
+        <ImageBackground
+          source={require("../images/topbg.png")}
+          style={{ flex: 1 }}
+          imageStyle={{ resizeMode: "contain" }}
+        >
           <View
             style={{
               flex: 1,
@@ -46,7 +64,7 @@ export default class PersonalInfo extends BasePage {
             <View
               style={{
                 width: "100%",
-                flex: 1
+                flex: 2
               }}
             >
               <CourseTitle
@@ -54,10 +72,8 @@ export default class PersonalInfo extends BasePage {
                 title="个人信息"
                 backPress={() => this.goBack()}
                 lefttype={2}
-                righttype={2}
                 textcolor={"white"}
-                backPress={() => alert("点击左侧")}
-                rightPress={() => alert("点击分享")}
+                backPress={() => this.goBack()}
               />
             </View>
 
@@ -88,10 +104,11 @@ export default class PersonalInfo extends BasePage {
                 />
               </View>
             </View>
+            <View style={{ flex: 0.1 }} />
             <View
               style={{
                 width: "100%",
-                flex: 4,
+                flex: 4.1,
                 alignItems: "center",
                 justifyContent: "center"
               }}
@@ -110,12 +127,13 @@ export default class PersonalInfo extends BasePage {
                 {this.userInfo123()}
               </View>
             </View>
+            <View style={{ flex: 0.1 }} />
             <View
               style={{
                 width: "100%",
                 alignItems: "center",
                 justifyContent: "center",
-                flex: 4
+                flex: 4.1
               }}
             >
               <View
@@ -134,42 +152,57 @@ export default class PersonalInfo extends BasePage {
               style={{
                 width: "100%",
                 flex: 4,
-                alignItems: "center",
-                justifyContent: "center"
+                flexDirection: "column"
               }}
             >
-              <View
-                style={{
-                  width: "80%",
-                  height: "35%"
-                }}
-              >
-                <ImageBackground
-                  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 style={{ flex: 0.5 }} />
+              <View style={{ flex: 1, flexDirection: "row" }}>
+                <View style={{ flex: 1 }} />
+                <View
                   style={{
-                    flex: 1,
-                    alignItems: "center",
-                    borderRadius: 40,
-                    justifyContent: "center",
+                    flex: 7,
                     width: "100%",
                     height: "100%"
                   }}
-                  imageStyle={{ borderRadius: 40 }}
                 >
-                  <Text
+                  <TouchableOpacity
+                    activeOpacity={1}
                     style={{
-                      fontSize: 30,
-                      color: "white",
+                      flex: 1,
                       width: "100%",
-                      textAlign: "center"
+                      alignItems: "center",
+                      justifyContent: "center",
+                      height: "100%"
                     }}
+                    onPress={() => this.logout()}
                   >
-                    退出登录
-                  </Text>
-                </ImageBackground>
+                    <ImageBackground
+                      source={require("../images/logoutbg1.png")}
+                      style={{
+                        flex: 1,
+                        width: "100%",
+                        resizeMode: "repeat",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "100%"
+                      }}
+                      imageStyle={{ resizeMode: "contain" }}
+                    >
+                      <Text
+                        style={{
+                          fontSize: 30,
+                          color: "white",
+                          width: "100%",
+                          textAlign: "center"
+                        }}
+                      >
+                        退出登录
+                      </Text>
+                    </ImageBackground>
+                  </TouchableOpacity>
+                  <View style={{ flex: 1 }} />
+                </View>
+                <View style={{ flex: 1 }} />
               </View>
             </View>
           </View>
@@ -196,13 +229,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(0)}
           </View>
 
           <Text style={styles.item_text}>头像</Text>
@@ -213,13 +240,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(0)}
           </View>
         </View>
         <View style={{ flex: 0.05 }} />
@@ -231,16 +252,10 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(1)}
           </View>
 
-          <Text style={styles.item_text}>昵称</Text>
+          <Text style={styles.item_text}>{this.state.nickName}</Text>
           <View
             style={{
               flex: 2,
@@ -248,13 +263,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(1)}
           </View>
         </View>
         <View style={{ flex: 0.05 }} />
@@ -267,13 +276,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(2)}
           </View>
 
           <Text style={styles.item_text}>生日</Text>
@@ -284,18 +287,13 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(2)}
           </View>
         </View>
       </View>
     );
   }
+
   userInfo456() {
     return (
       <View
@@ -314,13 +312,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(3)}
           </View>
 
           <Text style={styles.item_text}>所在地区</Text>
@@ -331,13 +323,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(3)}
           </View>
         </View>
         <View style={{ flex: 0.05 }} />
@@ -349,16 +335,10 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(4)}
           </View>
 
-          <Text style={styles.item_text}>我的学习</Text>
+          <Text style={styles.item_text}>{this.state.schoolName}</Text>
           <View
             style={{
               flex: 2,
@@ -366,13 +346,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(4)}
           </View>
         </View>
         <View style={{ flex: 0.05 }} />
@@ -384,13 +358,7 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.choseheadericon(5)}
           </View>
 
           <Text style={styles.item_text}>我的年级</Text>
@@ -401,19 +369,100 @@ export default class PersonalInfo extends BasePage {
               justifyContent: "center"
             }}
           >
-            <Image
-              style={{
-                backgroundColor: "yellow",
-                width: "50%",
-                height: "50%"
-              }}
-            />
+            {this.getArraowImg(5)}
           </View>
         </View>
       </View>
     );
   }
+  getArraowImg(type) {
+    return (
+      <TouchableOpacity
+        style={{
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center"
+        }}
+        onPress={() => this.arrowpress(type)}
+      >
+        <Image
+          source={require("../images/arrow.png")}
+          style={{
+            width: "20%",
+            height: "30%"
+          }}
+        />
+      </TouchableOpacity>
+    );
+  }
+
+  choseheadericon(type) {
+    let headerpath;
+    switch (type) {
+      case 0:
+        headerpath = require("../images/headportrait.png");
+
+        break;
+      case 1:
+        headerpath = require("../images/nickname.png");
+        break;
+      case 2:
+        headerpath = require("../images/birthday.png");
+        break;
+      case 3:
+        headerpath = require("../images/location.png");
+        break;
+      case 4:
+        headerpath = require("../images/school.png");
+        break;
+      case 5:
+        headerpath = require("../images/grade.png");
+        break;
+    }
+    // alert(headerpath);
+    return (
+      <Image
+        source={headerpath}
+        style={{
+          width: "60%",
+          height: "60%",
+          resizeMode: "contain"
+        }}
+      />
+    );
+  }
+
+  arrowpress(type) {
+    switch (type) {
+      case 0:
+        alert("点击头像");
+        break;
+      case 1:
+        this.dialog.setInfo("修改昵称", "昵称");
+        this.dialog.setModalVisible(true, 1);
+        break;
+      case 2:
+        alert("生日");
+        break;
+      case 3:
+        alert("所在地区");
+        break;
+      case 4:
+        this.dialog.setInfo("我的学校", "学校名称");
+        this.dialog.setModalVisible(true, 2);
+        break;
+      case 5:
+        alert("我的年级");
+        break;
+    }
+  }
+
+  logout() {
+    alert("点击退出了");
+  }
 }
+
 const styles = StyleSheet.create({
   item: {
     flex: 1,
@@ -423,6 +472,7 @@ const styles = StyleSheet.create({
   },
   item_text: {
     flex: 10,
+    marginLeft: 10,
     textAlignVertical: "center",
     color: "black",
     fontSize: 20

pages/components/PersonalInfoDialog.js

@@ -0,0 +1,238 @@
+/**
+ * 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 PersonalInfoDialog extends Component<Props> {
+  state = {
+    modalVisible: false,
+    title: "title",
+    placeholder: "",
+    touchcolor: "white",
+    touchtextcolor: "#58A8FA",
+    touch_cancel_color: "white",
+    touch_cancel_textcolor: "#58A8FA",
+    input_text: "",
+    updateType: 0 //1修改昵称,2修改学校名称
+  };
+
+  setModalVisible(visible, type) {
+    this.setState({ modalVisible: visible, updateType: type });
+  }
+  setInfo(mytitle, holder) {
+    this.setState({
+      title: mytitle,
+      placeholder: holder
+    });
+  }
+
+  touchDown() {
+    this.setState({
+      touchcolor: "#58A8FA",
+      touchtextcolor: "white"
+    });
+  }
+  touchUp() {
+    this.setState({
+      touchcolor: "white",
+      touchtextcolor: "#58A8FA"
+    });
+  }
+  touchCancelDown() {
+    this.setState({
+      touch_cancel_color: "#58A8FA",
+      touch_cancel_textcolor: "white"
+    });
+  }
+  touchCancelUp() {
+    this.setState({
+      touch_cancel_color: "white",
+      touch_cancel_textcolor: "#58A8FA"
+    });
+  }
+  setParentState() {
+    let data;
+    if (this.state.updateType == 1) {
+      data = { nickName: this.state.input_text };
+    } else if (this.state.updateType == 2) {
+      data = { schoolName: this.state.input_text };
+    }
+    this.props.updateParentState(data);
+    this.setModalVisible(false);
+  }
+
+  render() {
+    return (
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={this.state.modalVisible}
+        onRequestClose={() => {
+          this.setState({ modalVisible: false });
+        }}
+      >
+        <View
+          style={{
+            flex: 1,
+            width: "100%",
+            height: "100%",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "rgba(0, 0, 0, 0.3)",
+            flexDirection: "row"
+          }}
+        >
+          <View
+            style={{
+              flex: 111,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "white"
+            }}
+          >
+            <View
+              style={{
+                height: 150,
+                width: "100%",
+
+                backgroundColor: "white"
+              }}
+            >
+              <View
+                style={{
+                  flex: 1,
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+              >
+                <Text
+                  style={{
+                    flex: 1,
+                    textAlignVertical: "center",
+                    fontSize: 25,
+                    color: "black"
+                  }}
+                >
+                  {this.state.title}
+                </Text>
+              </View>
+              <View
+                style={{
+                  flex: 1,
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+              >
+                <TextInput
+                  placeholder={this.state.placeholder}
+                  editable={true} //是否可编辑
+                  style={{
+                    width: "90%",
+                    height: "90%",
+                    borderColor: "black",
+                    borderWidth: 0,
+                    marginLeft: 5,
+                    fontSize: 20
+                  }}
+                  onChangeText={text => this.setState({ input_text: text })}
+                />
+              </View>
+              <View
+                style={{
+                  flex: 0.8,
+                  flexDirection: "row",
+                  alignItems: "center"
+                }}
+              >
+                <View
+                  style={{
+                    flex: 4
+                  }}
+                />
+                <View
+                  style={{
+                    flex: 2,
+                    backgroundColor: this.state.touchcolor,
+                    height: "100%",
+                    borderRadius: 30
+                  }}
+                >
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    onPressIn={() => this.touchDown()}
+                    onPressOut={() => this.touchUp()}
+                    onPress={() => {
+                      this.setParentState();
+                    }}
+                  >
+                    <Text
+                      style={{
+                        textAlignVertical: "center",
+                        textAlign: "center",
+                        fontSize: 25,
+                        borderRadius: 30,
+                        color: this.state.touchtextcolor
+                      }}
+                    >
+                      确定
+                    </Text>
+                  </TouchableOpacity>
+                </View>
+                <View style={{ flex: 0.5 }} />
+                <View
+                  style={{
+                    flex: 2,
+                    backgroundColor: this.state.touch_cancel_color,
+                    height: "100%",
+                    borderRadius: 30
+                  }}
+                >
+                  <TouchableOpacity
+                    activeOpacity={1}
+                    onPressIn={() => this.touchCancelDown()}
+                    onPressOut={() => this.touchCancelUp()}
+                    onPress={() => this.setModalVisible(false)}
+                  >
+                    <Text
+                      style={{
+                        textAlignVertical: "center",
+                        textAlign: "center",
+                        fontSize: 25,
+                        color: this.state.touch_cancel_textcolor
+                      }}
+                    >
+                      取消
+                    </Text>
+                  </TouchableOpacity>
+                </View>
+                <View style={{ flex: 0.5 }} />
+              </View>
+              <View style={{ flex: 0.2 }} />
+            </View>
+          </View>
+        </View>
+      </Modal>
+    );
+  }
+}

pages/components/SchedulePage.js

@@ -44,7 +44,7 @@ export default class SchedulePage extends BasePage {
       video_width: "0%",
       video_height: "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"
+        "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
     };
   }
 
@@ -70,7 +70,12 @@ export default class SchedulePage extends BasePage {
             alignItems: "center"
           }}
         >
-          <View style={{ flex: 50, backgroundColor: "white" }}>
+          <View
+            style={{
+              flex: 50,
+              backgroundColor: "white"
+            }}
+          >
             <CourseTitle
               width={this.getWindowWidth()}
               title="第12周 爱上幼儿园"
@@ -102,6 +107,7 @@ export default class SchedulePage extends BasePage {
             <CusVideo
               uri={this.state.video_uri}
               ref={view => (this.video = view)}
+              videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
               style={{
                 flex: this.state.video_flex,
                 width: this.state.video_width,
@@ -217,12 +223,19 @@ export default class SchedulePage extends BasePage {
         width={this.getWindowWidth() * 0.9}
         height={50}
         data={data}
-        onPress={() => this.aa(data.videourl)}
+        onPress={() => this.changeUrl(data.videourl)}
       />
     );
   }
-
-  aa(url) {
+  fullScreenPlayer() {
+    alert("宽" + this.getWindowWidth());
+    alert("高：" + this.getWindowHeight());
+    this.setState({
+      video_width: this.getWindowHeight(),
+      video_height: 1111
+    });
+  }
+  changeUrl(url) {
     //切换视频并且播放
     alert(url);
     this.setState({

pages/components/ScrollRow.js

@@ -0,0 +1,114 @@
+/** 
+ * @param: 
+ *      itemWidth: 每一个图片宽度
+ *      itemHeight: 每一个图片高度
+ *      data:  数据 Arrary
+ */
+
+import React, { Component } from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+    FlatList,
+    TouchableOpacity,
+    Image
+} from "react-native";
+import Dimensions from '../utils/dimensions'
+
+export default class ScrollRow extends Component {
+
+
+    render() {
+        return (
+            <FlatList
+
+                data={[{
+                    summary: 'Title Text', key: 'item1', icon:
+                        "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",
+                }, {
+                    summary: 'Title Text', key: 'item2', icon:
+                        "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",
+                }, {
+                    summary: 'Title Text', key: 'item3', icon:
+                        "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",
+                }, {
+                    summary: 'Title Text', key: 'item4', icon:
+                        "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",
+                }, {
+                    title: 'Title Text', key: 'item5', icon:
+                        "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",
+                }, {
+                    summary: 'Title Text', key: 'item6', icon:
+                        "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",
+                }]}
+                horizontal={true}
+                renderItem={({ item, separators }) => this.renderItem(item, separators)}
+            />
+        )
+    }
+
+    renderItem(item, separators) {
+        return (
+            <TouchableOpacity
+                style={{
+                    // flex: 1,
+                    height: this.props.itemHeight,
+                    width: this.props.itemWidth,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginLeft: 9,
+                }}
+                onPress={() => {
+                    alert(item.title);
+                }}
+                activeOpacity={1}
+            >
+                <View style={{
+                    height: this.props.itemHeight,
+                    width: this.props.itemWidth,
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    // flex: 1,
+                }}>
+                    <Image
+                        source={{
+                            uri: item.icon
+                        }}
+                        style={{
+                            borderRadius: 10,
+                            width: this.props.itemWidth,
+                            height: this.props.itemHeight,
+                            marginBottom: 6,
+                        }}
+                    />
+                    {item.summary
+                        ?
+                        <Text style={styles.itemSummary}>
+                            {item.summary}
+                        </Text>
+                        :
+                        null
+                    }
+
+                </View>
+
+            </TouchableOpacity>
+        )
+    }
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+
+    },
+    itemSummary: {
+        // flex:1,
+        width: '100%',
+        height: 20,
+        alignItems: 'center',
+        justifyContent: "flex-start",
+        color: '#151515',
+        fontSize: 13,
+    }
+})

pages/components/Swiper.js

@@ -16,66 +16,61 @@ import {
 import Dimensions from '../utils/dimensions';
 import Swiper from "react-native-swiper";
 
+const dotRegular = <View style={{ borderColor: '#fff', borderWidth: 2, width: 8, height: 8, borderRadius: 4, marginLeft: 5, marginRight: 5, marginBottom: -20, }} />;
+const dotActive = <View style={{ backgroundColor: '#fff', width: 8, height: 8, borderRadius: 4, marginLeft: 5, marginRight: 5, marginBottom: -20, }} />;
 export default class Swipers extends Component {
+
   render() {
     return (
-      <View style={styles.Carousel}>
-        <Swiper
-          style={{ flex: 1 }}
-          horizontal={true}
-          autoplayTimeout={5}
-          autoplay={this.props.autoplay}
-          loop={this.props.loop}
-          index={this.props.ifShowMiddle ? 1 : 0}
-          activeDotColor="#fff"
-          showsPagination={false}
-        >
-          <View style={styles.slide}>
-            <Image
-              source={{
-                uri:
-                  "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
-              }}
-              style={styles.img}
-            />
-          </View>
-          <View style={styles.slide}>
-            <Image
-              source={{
-                uri:
-                  "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
-              }}
-              style={styles.img}
-            />
-          </View>
-        </Swiper>
-      </View>
+      <Swiper
+        style={styles.wrapper}
+        horizontal={true}
+        autoplayTimeout={5}
+        autoplay={this.props.autoplay}
+        loop={this.props.loop}
+        index={this.props.ifShowMiddle ? 1 : 0}
+        activeDotColor="#fff"
+        showsPagination={true}
+        dot={dotRegular}
+        activeDot={dotActive}
+      >
+        <View style={styles.slide}>
+          <Image
+            source={{
+              uri:
+                "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
+            }}
+            style={styles.img}
+          />
+        </View>
+        <View style={styles.slide}>
+          <Image
+            source={{
+              uri:
+                "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&fm=26&gp=0.jpg"
+            }}
+            style={styles.img}
+          />
+        </View>
+      </Swiper>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  Carousel: {
-    // width: '100%',
-    // height: 153,
-    flex:1,
-    borderRadius: 10,
-    overflow: 'hidden'
-  },
   wrapper: {
-    width: '100%'
+    // flex: 1,
   },
   slide: {
-    width: 352,
-    height: 153,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 10,
-    marginHorizontal:6
+    width: Dimensions.getDp(352),
+    height: Dimensions.getDp(153),
+    marginHorizontal: Dimensions.getDp(3),
+    zIndex: 1
   },
   img: {
-    width: 352,
-    height: 153,
-    borderRadius: 10
+    width: Dimensions.getDp(352),
+    height: Dimensions.getDp(153),
+    borderRadius: Dimensions.getDp(10),
+    zIndex: 1
   }
 });

pages/components/TopicTitle.js

@@ -0,0 +1,96 @@
+/** 
+ * @param: 
+ *      title: 标题
+ *      summary: 标题下的灰字简介
+ *      background: 背景色
+ *      tubeColor: 左边小长条背景色
+ *      ifTubeShow: 左侧icon是否显示,默认不显示  boolean
+ */
+
+import React, { Component } from "react";
+import {
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import Dimensions from '../utils/dimensions'
+
+const styles = StyleSheet.create({
+    wrapper: {
+        width: Dimensions.width,
+        height: 45,
+        paddingLeft: 14,
+        justifyContent: "center",
+        flexDirection: 'column',
+        backgroundColor: 'yellow'
+    },
+    line1: {
+        flex: 1,
+        alignItems: "center",
+        flexDirection: 'row'
+    },
+    line2: {
+        // 123
+        flex: 1
+    },
+    tube: {
+        width: 4,
+        height: 14,
+        marginRight: 6,
+        backgroundColor: 'red'
+    },
+    title: {
+        color: '#373737',
+        fontSize: 18
+    },
+    summary: {
+        color: '#787878',
+        fontSize: 16
+    }
+})
+
+export default class TopicTitle extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        let line2 = <View></View>;
+        if (this.props.summary) {
+            line2 = <View style={styles.line2}>
+                <Text style={styles.summary}>{this.props.summary}</Text>
+            </View>
+        }
+        let tube = <View></View>;
+        if (this.props.ifTubeShow) {
+            tube = 1
+        }
+        const tubeColor = this.props.tubeColor ? this.props.tubeColor : '#ffd101';
+        console.log('背景色', this.props)
+        return (
+            <View
+                style={{
+                    width: Dimensions.width,
+                    height: this.props.background ? 45 : 66,
+                    paddingLeft: 14,
+                    paddingTop: this.props.background ? 0: 20,
+                    // justifyContent: "center",
+                    flexDirection: 'column',
+                    backgroundColor: this.props.background ? this.props.background : '#fff'
+                }}>
+                <View 
+                style={styles.line1}>
+                    <View
+                        style={this.props.ifTubeShow ? {
+                            width: 4,
+                            height: 14,
+                            marginRight: 6,
+                            backgroundColor: tubeColor
+                        } : null}></View>
+                    <Text style={styles.title}>{this.props.title}</Text>
+                </View>
+                {line2}
+            </View>
+
+        );
+    }
+}

pages/utils/dimensions.js

@@ -1,12 +1,14 @@
 let {Dimensions,StatusBar,Platform,PixelRatio} = require('react-native');
-
 let {width,scale,height,fontScale} = Dimensions.get("window");
 let isIOS = Platform.OS == "ios";
 let statusBarHeight = isIOS? 20: StatusBar.currentHeight;
 let pixelRatio = PixelRatio;
 fontScale = scale;
-
-
+const widthScale = width / 375;
+const heightScale = height / 667;
+/* 
+* 设计稿元素宽度（px） / 设计稿总宽度（px） = 元素的宽度（dp） / 屏幕的总宽度（dp）
+*/
 export default Dimensions  = {
 	get:Dimensions.get,
 	screenWidth:width,
@@ -23,11 +25,13 @@ export default Dimensions  = {
 		return size*fontScale;
 	},
 	getWidth:function(width){
-		return width*fontScale;
+		return width*widthScale;
 	},
 	getHeight:function(height){
 		return height*fontScale;
 	},
+	/* px转dp */
+	getDp: px => PixelRatio.roundToNearestPixel(px),
 	size:{
 		"1":1*fontScale
 	}