增加详情页

App.js

@@ -21,6 +21,9 @@ import { createStackNavigator, createAppContainer } from "react-navigation";
 import MainActivity from "./pages/MainActivity";
 import SchoolAge from "./pages/components/SchoolAge";
 import MainPage from "./pages/components/MainPage";
+// 课程详情
+import CourseDetails from './pages/CourseDetails';
+
 const instructions = Platform.select({
   ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
   android:
@@ -32,7 +35,8 @@ const RootNavigator = createStackNavigator(
   {
     MainActivity: { screen: MainActivity },
     SchoolAge: { screen: SchoolAge },
-    MainPage: { screen: MainPage }
+    MainPage: { screen: MainPage },
+    CourseDetails: {screen: CourseDetails}
   },
   {
     initialRouteName: "SchoolAge",

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/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,
+  }
+});