'几种适配方法尝试'

App.js

@@ -21,18 +21,16 @@ import { createStackNavigator, createAppContainer } from "react-navigation";
 import MainActivity from "./pages/MainActivity";
 import SchoolAge from "./pages/components/SchoolAge";
 import MainPage from "./pages/components/MainPage";
-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"
-});
+import SchedulePage from "./pages/components/SchedulePage";
+import PersonalInfo from "./pages/components/PersonalInfo";
 
 const RootNavigator = createStackNavigator(
   {
     MainActivity: { screen: MainActivity },
     SchoolAge: { screen: SchoolAge },
-    MainPage: { screen: MainPage }
+    MainPage: { screen: MainPage },
+    SchedulePage: { screen: SchedulePage },
+    PersonalInfo: { screen: PersonalInfo }
   },
   {
     initialRouteName: "MainPage",

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

@@ -6692,36 +6692,6 @@
         "scheduler": "^0.13.3"
       }
     },
-    "react-addons-shallow-compare": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npm.taobao.org/react-addons-shallow-compare/download/react-addons-shallow-compare-15.6.2.tgz",
-      "integrity": "sha1-GYoAuR/DdiPbZKKP0XtZa6NicC8=",
-      "requires": {
-        "fbjs": "^0.8.4",
-        "object-assign": "^4.1.0"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "1.2.7",
-          "resolved": "http://registry.npm.taobao.org/core-js/download/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
-        },
-        "fbjs": {
-          "version": "0.8.17",
-          "resolved": "http://registry.npm.taobao.org/fbjs/download/fbjs-0.8.17.tgz",
-          "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
-          "requires": {
-            "core-js": "^1.0.0",
-            "isomorphic-fetch": "^2.1.1",
-            "loose-envify": "^1.0.0",
-            "object-assign": "^4.1.0",
-            "promise": "^7.1.1",
-            "setimmediate": "^1.0.5",
-            "ua-parser-js": "^0.7.18"
-          }
-        }
-      }
-    },
     "react-art": {
       "version": "16.8.6",
       "resolved": "https://registry.npm.taobao.org/react-art/download/react-art-16.8.6.tgz",
@@ -6983,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",
@@ -6996,15 +6971,6 @@
       "resolved": "https://registry.npm.taobao.org/react-native-screens/download/react-native-screens-1.0.0-alpha.22.tgz",
       "integrity": "sha1-ehIDd7Uqqbu5TQuFQaAUAmvpKJs="
     },
-    "react-native-snap-carousel": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npm.taobao.org/react-native-snap-carousel/download/react-native-snap-carousel-3.7.5.tgz",
-      "integrity": "sha1-cXJFbUCrkWFSMFXrMC+bA7JEJAo=",
-      "requires": {
-        "prop-types": "^15.6.1",
-        "react-addons-shallow-compare": "15.6.2"
-      }
-    },
     "react-native-swiper": {
       "version": "1.5.14",
       "resolved": "https://registry.npm.taobao.org/react-native-swiper/download/react-native-swiper-1.5.14.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/CourseDetails.js

@@ -0,0 +1,37 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  ScrollView,
+  FlatList
+} from "react-native";
+
+import VideoExplain from './components/VideoExplain'
+
+export default class CourseDetails extends Component {
+  render() {
+    return (
+      <ScrollView style={{backgroundColor: '#F0F1F5'}}>
+        <VideoExplain 
+        title={'同步辅导语文一年级下册'}
+        details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
+        uri={'http://chimee.org/vod/1.mp4'}
+        />
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  
+});

pages/MainActivity.js

@@ -20,7 +20,7 @@ import BasePage from "./BasePage";
 import Header from "./components/Header";
 import RevisionAge from "./components/RevisionAge";
 import CourseTitle from "./components/CourseTitle";
-
+import ScheduleFlatItem from "./components/ScheduleFlatItem";
 const instructions = Platform.select({
   ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
   android:
@@ -59,7 +59,10 @@ export default class MainActivity extends BasePage {
           textss="学前"
           onPress={() => this.toWebPage("这里写json......")}
         />
-        <CourseTitle width={150} height={50} title="学前" />
+
+        <Text style={styles.instructions}>To get started, edit App.js</Text>
+        <Text style={styles.instructions}>To get started, edit App.js</Text>
+        <ScheduleFlatItem width={this.getWindowWidth()} height={30} />
       </View>
     );
   }

pages/components/CourseTitle.js

@@ -52,14 +52,8 @@ export default class CourseTitle extends Component<Props> {
               justifyContent: "center"
             }}
           >
-            <TouchableOpacity
-              //返回
-              activeOpacity={1}
-              onPress={this.props.backPress}
-            >
-              <Image
-                style={{ width: 20, height: 20, backgroundColor: "blue" }}
-              />
+            <TouchableOpacity activeOpacity={1} onPress={this.props.backPress}>
+              {this.selectleftIcon()}
             </TouchableOpacity>
           </View>
           <View
@@ -74,6 +68,7 @@ export default class CourseTitle extends Component<Props> {
                 width: "100%",
                 fontSize: 18,
                 fontWeight: "bold",
+                color: this.props.textcolor,
                 textAlign: "center"
               }}
             >
@@ -87,14 +82,8 @@ export default class CourseTitle extends Component<Props> {
               justifyContent: "center"
             }}
           >
-            <TouchableOpacity
-              //分享
-              activeOpacity={1}
-              onPress={this.props.sharedpress}
-            >
-              <Image
-                style={{ width: 20, height: 20, backgroundColor: "blue" }}
-              />
+            <TouchableOpacity activeOpacity={1} onPress={this.props.rightPress}>
+              {this.selectRightIcon()}
             </TouchableOpacity>
           </View>
         </View>
@@ -106,16 +95,82 @@ export default class CourseTitle extends Component<Props> {
       </View>
     );
   }
+
+  selectleftIcon() {
+    let type = this.props.lefttype;
+    switch (type) {
+      case 1:
+        //左侧返回图片1
+        return (
+          <Image
+            style={{
+              width: 20,
+              height: 20,
+              backgroundColor: "blue"
+            }}
+          />
+        );
+        break;
+      case 2:
+        //左侧返回图片2
+        return (
+          <Image
+            style={{
+              width: 20,
+              height: 20,
+              backgroundColor: "red"
+            }}
+          />
+        );
+        break;
+    }
+  }
+  selectRightIcon() {
+    let type = this.props.righttype;
+    switch (type) {
+      case 1:
+        //课程表标题，右侧是分享
+        return (
+          <Image
+            style={{
+              width: 20,
+              height: 20,
+              backgroundColor: "blue"
+            }}
+          />
+        );
+        break;
+      case 2:
+        //个人中心，右侧是设置
+        return (
+          <Image
+            style={{
+              width: 20,
+              height: 20,
+              backgroundColor: "red"
+            }}
+          />
+        );
+        break;
+    }
+  }
 }
 /**
-
-      使用方法
-    <CourseTitle
-          width={150}
-          height={50}
-          title="学前"
-          backPress={() => this.goBack()}
-          sharedpress={() => alert("点击分享")}
-        />
+  <CourseTitle
+              width={this.getWindowWidth()}
+              title="第12周 爱上幼儿园"
+              //设置左侧按钮样式
+              lefttype={2}
+              //设置右侧按钮样式
+              righttype={1}
+              //设置文字颜色
+              textcolor={"red"}
+              // backPress={() => this.goBack()}
+              //左侧按钮方法
+              backPress={() => alert("点击返回")}
+              //右侧按钮方法
+              rightPress={() => alert("点击分享")}
+            />
+          </View>
 
  */

pages/components/CusVideo.js

@@ -82,7 +82,12 @@ export default class CusVideo extends React.Component {
               {formatTime(this.state.currentTime)}
             </Text>
           </View>
-          <View style={{ flex: 7, backgroundColor: "yellow" }}>
+          <View
+            style={{
+              flex: 7,
+              backgroundColor: "yellow"
+            }}
+          >
             {/* //中间进度条 */}
             {/* <SeekBar
                 style={{
@@ -119,17 +124,31 @@ export default class CusVideo extends React.Component {
     });
   };
   play() {
-    this.setState({ paused: !this.state.paused });
-    // if (this.state.paused) {
-    //   this.player_icon_index = 1;
-    // } else {
-    //   this.player_icon_index = 0;
-    // }
+    if (this.state.paused) {
+      this.start();
+    } else {
+      this.pause();
+    }
+  }
+  pause() {
+    this.setState({ paused: true });
+    this.player_icon_index = 1;
+  }
+  start() {
+    this.setState({ paused: false });
+    this.player_icon_index = 0;
   }
   showToast(params) {
     // ToastExample.message(params);
     ToastExample.show(params, ToastExample.SHORT);
   }
+
+  refreshVideo() {
+    this.setState({
+      duration: 0,
+      currentTime: 0
+    });
+  }
 }
 
 const styles = StyleSheet.create({
@@ -148,7 +167,7 @@ const styles = StyleSheet.create({
     height: "80%",
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "red"
+    backgroundColor: "blue"
   },
   player_time: {
     backgroundColor: "red",

pages/components/MainPage.js

@@ -288,7 +288,7 @@ export default class MainPage extends BasePage {
     return (
       <View
         style={{
-          height: 193,
+          height: Dimensions.getDp(193),
           flex: 1,
           justifyContent: "center",
           alignItems: "center",
@@ -298,8 +298,8 @@ export default class MainPage extends BasePage {
         <View
           style={{
             // width: Dimensions.width,
-            width: Dimensions.getDp(358),
-            height: Dimensions.getDp(150),
+            width: Dimensions.getWidth(358) ,
+            height: Dimensions.getDp(153),
             justifyContent: "center",
             overflow: 'hidden'
           }}
@@ -322,7 +322,7 @@ export default class MainPage extends BasePage {
         <TouchableOpacity
           style={{ width: 172, height: 86, marginRight: 12, backgroundColor: 'red' }}
           onPress={() => {
-            alert(item.name);
+            alert(Dimensions.width.toString());
           }}
           key={index}
           activeOpacity={1}
@@ -385,6 +385,8 @@ export default class MainPage extends BasePage {
         return this.getSwiperElement();
         break;
       case 2:
+        let abc = Dimensions.pixelRatio.get().toString()
+        this.Toast(abc)
         return this.getScheduleElement(data);
         break;
       case 3:
@@ -470,7 +472,7 @@ export default class MainPage extends BasePage {
                           width: this.getWindowWidth() * 0.9
                         }}
                         onPress={() => {
-                          alert(item.name);
+                          alert(Dimensions.width.toString());
                         }}
                         activeOpacity={1}
                       >

pages/components/PersonalInfo.js

@@ -0,0 +1,430 @@
+/**
+ * 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,
+  Button,
+  StatusBar,
+  DeviceEventEmitter
+} from "react-native";
+import AndroidUtil from "../../util/AndroidUtil";
+import BasePage from "../BasePage";
+import CourseTitle from "./CourseTitle";
+import Header from "./Header";
+
+type Props = {};
+export default class PersonalInfo extends BasePage {
+  render() {
+    return (
+      <View style={{ flex: 1 }}>
+        <StatusBar
+          // backgroundColor={"transparent"}
+          barStyle={"dark-content"}
+          backgroundColor={"white"}
+          translucent={false}
+        />
+
+        <ImageBackground style={{ flex: 1, backgroundColor: "blue" }}>
+          <View
+            style={{
+              flex: 1,
+              flexDirection: "column"
+            }}
+          >
+            <View
+              style={{
+                width: "100%",
+                flex: 1
+              }}
+            >
+              <CourseTitle
+                width={this.getWindowWidth()}
+                title="个人信息"
+                backPress={() => this.goBack()}
+                lefttype={2}
+                righttype={2}
+                textcolor={"white"}
+                backPress={() => alert("点击左侧")}
+                rightPress={() => alert("点击分享")}
+              />
+            </View>
+
+            <View
+              style={{
+                width: "100%",
+                flex: 3,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <View
+                style={{
+                  backgroundColor: "white",
+                  width: "90%",
+                  height: "90%",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 20,
+                  overflow: "hidden"
+                }}
+              >
+                <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>
+            <View
+              style={{
+                width: "100%",
+                flex: 4,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <View
+                style={{
+                  backgroundColor: "#F3F3F3",
+                  width: "90%",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  height: "90%",
+                  overflow: "hidden",
+                  borderRadius: 20
+                }}
+              >
+                {this.userInfo123()}
+              </View>
+            </View>
+            <View
+              style={{
+                width: "100%",
+                alignItems: "center",
+                justifyContent: "center",
+                flex: 4
+              }}
+            >
+              <View
+                style={{
+                  backgroundColor: "#F3F3F3",
+                  width: "90%",
+                  height: "90%",
+                  overflow: "hidden",
+                  borderRadius: 20
+                }}
+              >
+                {this.userInfo456()}
+              </View>
+            </View>
+            <View
+              style={{
+                width: "100%",
+                flex: 4,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <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"
+                  }}
+                  style={{
+                    flex: 1,
+                    alignItems: "center",
+                    borderRadius: 40,
+                    justifyContent: "center",
+                    width: "100%",
+                    height: "100%"
+                  }}
+                  imageStyle={{ borderRadius: 40 }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 30,
+                      color: "white",
+                      width: "100%",
+                      textAlign: "center"
+                    }}
+                  >
+                    退出登录
+                  </Text>
+                </ImageBackground>
+              </View>
+            </View>
+          </View>
+        </ImageBackground>
+      </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"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>头像</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+        </View>
+        <View style={{ flex: 0.05 }} />
+        <View style={styles.item}>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>昵称</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+        </View>
+        <View style={{ flex: 0.05 }} />
+
+        <View style={styles.item}>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>生日</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </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"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>所在地区</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+        </View>
+        <View style={{ flex: 0.05 }} />
+        <View style={styles.item}>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>我的学习</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+        </View>
+        <View style={{ flex: 0.05 }} />
+        <View style={styles.item}>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+
+          <Text style={styles.item_text}>我的年级</Text>
+          <View
+            style={{
+              flex: 2,
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <Image
+              style={{
+                backgroundColor: "yellow",
+                width: "50%",
+                height: "50%"
+              }}
+            />
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  item: {
+    flex: 1,
+    width: "100%",
+    flexDirection: "row",
+    backgroundColor: "white"
+  },
+  item_text: {
+    flex: 10,
+    textAlignVertical: "center",
+    color: "black",
+    fontSize: 20
+  }
+});

pages/components/SchedulePage.js

@@ -16,6 +16,7 @@ import {
   TouchableOpacity,
   ImageBackground,
   FlatList,
+  StatusBar,
   Button,
   DeviceEventEmitter
 } from "react-native";
@@ -43,7 +44,7 @@ export default class SchedulePage extends BasePage {
       video_width: "0%",
       video_height: "0%",
       video_uri:
-        "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
+        "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4"
     };
   }
 
@@ -51,144 +52,161 @@ export default class SchedulePage extends BasePage {
     return (
       <View
         style={{
-          flex: 1,
-          backgroundColor: "#F3F3F3",
-          justifyContent: "center",
-          alignItems: "center"
+          flex: 1
         }}
       >
-        <View style={{ flex: 50 }}>
-          <CourseTitle
-            width={this.getWindowWidth()}
-            title="第12周 爱上幼儿园"
-            backPress={() => this.goBack()}
-            // backPress={() => alert("点击返回")}
-            sharedpress={() => alert("点击分享")}
-          />
-        </View>
+        <StatusBar
+          // backgroundColor={"transparent"}
+          barStyle={"dark-content"}
+          backgroundColor={"white"}
+          translucent={false}
+        />
+
         <View
           style={{
-            flex: 281,
-            width: "100%"
+            flex: 1,
+            backgroundColor: "#F3F3F3",
+            justifyContent: "center",
+            alignItems: "center"
           }}
         >
-          <Image
-            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: 50, backgroundColor: "white" }}>
+            <CourseTitle
+              width={this.getWindowWidth()}
+              title="第12周 爱上幼儿园"
+              lefttype={1}
+              righttype={1}
+              textcolor={"red"}
+              // backPress={() => this.goBack()}
+              backPress={() => alert("左侧按钮")}
+              rightPress={() => alert("右侧按钮")}
+            />
+          </View>
+          <View
             style={{
-              flex: this.state.videoImg_flex,
-              width: this.state.videoImg_width,
-              height: this.state.videoImg_height
+              flex: 281,
+              width: "100%"
             }}
-          />
-          <CusVideo
-            //无法切换视频
-            uri={this.state.video_uri}
+          >
+            <Image
+              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"
+              }}
+              style={{
+                flex: this.state.videoImg_flex,
+                width: this.state.videoImg_width,
+                height: this.state.videoImg_height
+              }}
+            />
+            <CusVideo
+              uri={this.state.video_uri}
+              ref={view => (this.video = view)}
+              style={{
+                flex: this.state.video_flex,
+                width: this.state.video_width,
+                height: this.state.video_height
+              }}
+            />
+          </View>
+          <View style={{ flex: 10 }} />
+          <View
             style={{
-              flex: this.state.video_flex,
-              width: this.state.video_width,
-              height: this.state.video_height
-            }}
-          />
-        </View>
-        <View style={{ flex: 10 }} />
-        <View
-          style={{
-            flex: 505,
-            justifyContent: "center",
-            alignItems: "center",
-            width: "100%"
-          }}
-        >
-          <FlatList
-            ItemSeparatorComponent={() => (
-              <View
-                style={{
-                  height: 10
-                }}
-              />
-            )}
-            renderItem={({ item }) => {
-              return this.loadFlatItem(item);
+              flex: 505,
+              justifyContent: "center",
+              alignItems: "center",
+              width: "100%"
             }}
-            keyExtractor={(item, index) => item.key.toString()}
-            horizontal={false}
-            data={[
-              {
-                key: 1,
-                typecolor: "#74E0FF",
-                typename: "习惯养成",
-                videoname: "碗里不剩一粒米",
-                videourl: "碗里不剩一粒米xxxx"
-              },
-              {
-                key: 2,
-                typecolor: "#FB5B76",
-                typename: "品格礼仪",
-                videoname: "我有很多朋友",
-                videourl: "我有很多朋友xxxx"
-              },
-              {
-                key: 3,
-                typecolor: "#EC48E1",
-                typename: "自我保护",
-                videoname: "小猫喵喵叫",
-                videourl: "小猫喵喵叫xxxx"
-              },
-              {
-                key: 4,
-                typecolor: "#39D6B9",
-                typename: "亲子游戏",
-                videoname: "安静的睡前游戏-全家人都睡了",
-                videourl: "安静的睡前游戏xxxx"
-              },
-              {
-                key: 5,
-                typecolor: "#3397F0",
-                typename: "欢乐音乐",
-                videoname: "小鸡捉虫子",
-                videourl: "小鸡捉虫子xxxx"
-              },
-              {
-                key: 11,
-                typecolor: "#74E0FF",
-                typename: "习惯养成",
-                videoname: "碗里不剩一粒米",
-                videourl: "碗里不剩一粒米xxxx"
-              },
-              {
-                key: 12,
-                typecolor: "#FB5B76",
-                typename: "品格礼仪",
-                videoname: "我有很多朋友",
-                videourl: "我有很多朋友xxxx"
-              },
-              {
-                key: 13,
-                typecolor: "#EC48E1",
-                typename: "自我保护",
-                videoname: "小猫喵喵叫",
-                videourl: "小猫喵喵叫xxxx"
-              },
-              {
-                key: 14,
-                typecolor: "#39D6B9",
-                typename: "亲子游戏",
-                videoname: "安静的睡前游戏-全家人都睡了",
-                videourl: "安静的睡前游戏xxxx"
-              },
-              {
-                key: 15,
-                typecolor: "#3397F0",
-                typename: "欢乐音乐",
-                videoname: "小鸡捉虫子",
-                videourl:
-                  "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
-              }
-            ]}
-          />
+          >
+            <FlatList
+              ItemSeparatorComponent={() => (
+                <View
+                  style={{
+                    height: 10
+                  }}
+                />
+              )}
+              renderItem={({ item }) => {
+                return this.loadFlatItem(item);
+              }}
+              keyExtractor={(item, index) => item.key.toString()}
+              horizontal={false}
+              data={[
+                {
+                  key: 1,
+                  typecolor: "#74E0FF",
+                  typename: "习惯养成",
+                  videoname: "碗里不剩一粒米",
+                  videourl: "碗里不剩一粒米xxxx"
+                },
+                {
+                  key: 2,
+                  typecolor: "#FB5B76",
+                  typename: "品格礼仪",
+                  videoname: "我有很多朋友",
+                  videourl: "我有很多朋友xxxx"
+                },
+                {
+                  key: 3,
+                  typecolor: "#EC48E1",
+                  typename: "自我保护",
+                  videoname: "小猫喵喵叫",
+                  videourl: "小猫喵喵叫xxxx"
+                },
+                {
+                  key: 4,
+                  typecolor: "#39D6B9",
+                  typename: "亲子游戏",
+                  videoname: "安静的睡前游戏-全家人都睡了",
+                  videourl: "安静的睡前游戏xxxx"
+                },
+                {
+                  key: 5,
+                  typecolor: "#3397F0",
+                  typename: "欢乐音乐",
+                  videoname: "小鸡捉虫子",
+                  videourl: "小鸡捉虫子xxxx"
+                },
+                {
+                  key: 11,
+                  typecolor: "#74E0FF",
+                  typename: "习惯养成",
+                  videoname: "碗里不剩一粒米",
+                  videourl: "碗里不剩一粒米xxxx"
+                },
+                {
+                  key: 12,
+                  typecolor: "#FB5B76",
+                  typename: "品格礼仪",
+                  videoname: "我有很多朋友",
+                  videourl: "我有很多朋友xxxx"
+                },
+                {
+                  key: 13,
+                  typecolor: "#EC48E1",
+                  typename: "自我保护",
+                  videoname: "小猫喵喵叫",
+                  videourl: "小猫喵喵叫xxxx"
+                },
+                {
+                  key: 14,
+                  typecolor: "#39D6B9",
+                  typename: "亲子游戏",
+                  videoname: "安静的睡前游戏-全家人都睡了",
+                  videourl:
+                    "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4"
+                },
+                {
+                  key: 15,
+                  typecolor: "#3397F0",
+                  typename: "欢乐音乐",
+                  videoname: "小鸡捉虫子",
+                  videourl:
+                    "http://efunvideo.ai160.com/vs2m/056/05602002/05602002001/05602002001.m3u8"
+                }
+              ]}
+            />
+          </View>
         </View>
       </View>
     );
@@ -196,8 +214,8 @@ export default class SchedulePage extends BasePage {
   loadFlatItem(data) {
     return (
       <ScheduleFlatItem
-        width={this.getWindowWidth() * 0.95}
-        height={60}
+        width={this.getWindowWidth() * 0.9}
+        height={50}
         data={data}
         onPress={() => this.aa(data.videourl)}
       />
@@ -205,6 +223,7 @@ export default class SchedulePage extends BasePage {
   }
 
   aa(url) {
+    //切换视频并且播放
     alert(url);
     this.setState({
       videoImg_flex: 0,
@@ -215,5 +234,7 @@ export default class SchedulePage extends BasePage {
       video_height: "100%",
       video_uri: url
     });
+    this.video.refreshVideo();
+    this.video.start();
   }
 }

pages/components/Swiper.js

@@ -62,13 +62,13 @@ const styles = StyleSheet.create({
     // flex: 1,
   },
   slide: {
-    width: 352,
-    height: 153,
-    marginHorizontal: 3,
+    width: Dimensions.getDp(352),
+    height: Dimensions.getDp(153),
+    marginHorizontal: Dimensions.getDp(3),
   },
   img: {
-    width: 352,
-    height: 153,
-    borderRadius: 10,
+    width: Dimensions.getDp(352),
+    height: Dimensions.getDp(153),
+    borderRadius: Dimensions.getDp(10),
   }
 });

pages/components/VideoExplain.js

@@ -0,0 +1,90 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image,
+  ScrollView,
+  FlatList
+} from "react-native";
+
+import CusVideo from './CusVideo'
+
+export default class VideoExplain extends Component {
+  // static propTypes = {
+  //   uri: PropTypes.string,
+  //   title: PropTypes.string,
+  //   details: PropTypes.string,
+  // };
+  render() {
+    return (
+      <ScrollView style={{backgroundColor: '#F0F1F5'}}>
+        <CusVideo uri={this.props.uri} style={{width: '100%', height: 210}}/>
+        <View style={styles.videoExplain}>
+          <View style={styles.title}>
+            <Text style={styles.font}>{this.props.title}</Text>
+            <View style={styles.icon}>
+              <Image src="" style={styles.iconSize}></Image>
+              <Image src="" style={styles.iconSize}></Image>
+            </View>
+          </View>
+          <View style={[styles.title, styles.tops]}>
+            <Text style={styles.font}>课程介绍：</Text>
+            <Text style={styles.clor}>更多 ></Text>
+          </View>
+          <Text style={styles.clor}>
+            {this.props.details}
+          </Text>
+        </View>
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  videoExplain: {
+    width: '100%',
+    backgroundColor: 'white',
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 13,
+    paddingBottom: 13
+  },
+  title: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  font: {
+    fontSize: 18,
+    color: 'black',
+    fontWeight: 'bold',
+  },
+  clor: {
+    fontSize: 14,
+    color: 'black',
+  },
+  icon: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  iconSize: {
+    width: 20,
+    height: 20,
+    backgroundColor: 'red',
+    marginLeft: 10
+  },
+  tops: {
+    marginTop: 18,
+  }
+});

pages/utils/dimensions.js

@@ -1,7 +1,4 @@
-// let console = require('console');
-
 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;
@@ -11,9 +8,7 @@ const widthScale = width / 375;
 const heightScale = height / 667;
 /* 
 * 设计稿元素宽度（px） / 设计稿总宽度（px） = 元素的宽度（dp） / 屏幕的总宽度（dp）
-* 358 / 375 = x / width
 */
-// console.log('widthScale',widthScale)
 export default Dimensions  = {
 	get:Dimensions.get,
 	screenWidth:width,
@@ -30,11 +25,10 @@ export default Dimensions  = {
 		return size*fontScale;
 	},
 	getWidth:function(width){
-		
 		return width*widthScale;
 	},
 	getHeight:function(height){
-		return height*heightScale;
+		return height*fontScale;
 	},
 	/* px转dp */
 	getDp: px => PixelRatio.roundToNearestPixel(px),