完善课程详情页

pages/CourseDetails.js

@@ -19,41 +19,50 @@ import {
 import VideoExplain from './components/VideoExplain'
 import CourseListRow from './components/CourseListRow'
 import CourseListLine from './components/CourseListLine'
+import Comment from './components/Comment'
+import Order from './components/Order'
 
 export default class CourseDetails extends Component {
   state = {
-    fullStyle: {}
+    fullStyle: {},
+    lefts: 0
   }
   render() {
     return (
-      <ScrollView style={{backgroundColor: '#F0F1F5', width: '100%', height: '100%'}}>
-        <View>
-          <VideoExplain 
-          full={this.full.bind(this)}
-          title={'同步辅导语文一年级下册'}
-          details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
-          uri={'http://chimee.org/vod/1.mp4'}
-          />
-        </View>
-        <View style={ this.state.fullStyle }>
-          <CourseListRow title={'课件'}></CourseListRow>
-          <CourseListLine title={'课件'}></CourseListLine>
-        </View> 
-      </ScrollView>
+      <View style={{backgroundColor: '#F0F1F5', width: '100%', height: '100%', position: 'relative'}}>
+        <ScrollView>
+          <View>
+            <VideoExplain 
+            full={this.full.bind(this)}
+            title={'同步辅导语文一年级下册'}
+            details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
+            uri={'http://chimee.org/vod/1.mp4'}
+            />
+          </View>
+          <View style={ this.state.fullStyle }>
+            <CourseListRow title={'课件'}></CourseListRow>
+            <CourseListLine title={'课件'}></CourseListLine>
+            <Comment title={ '全部评论' }></Comment>
+          </View> 
+        </ScrollView>
+        <Order left={ this.state.lefts }></Order>
+      </View>
     );
   }
   full(isFull){
     if(isFull) {
       // 全屏时隐藏多余的view
       this.setState({
-        fullStyle: {}
+        fullStyle: {},
+        lefts: 0
       })
     }else {
       // 全屏时隐藏多余的view
       this.setState({
         fullStyle: {
           display: 'none'
-        }
+        },
+        lefts: '-100%'
       })
     }
 

pages/components/Comment.js

@@ -0,0 +1,109 @@
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  View,
+  Image
+} from "react-native";
+
+export default class Comment extends Component {
+  render() {
+    return (
+      <View style={styles.courseComment}>
+        <View style={[styles.padding, styles.title]}>
+          <Text style={styles.font}>{this.props.title}</Text>
+          <View style={[ styles.button, styles.center ]}>
+            <Image src="" style={styles.iconSize} />
+            <Text>写评论</Text>
+          </View>
+        </View>
+        <View style={[ styles.padding ]}>
+          <View style={[ styles.title ]}>
+            <View style={[ styles.center ]}>
+                <Image style={[styles.headImg ]}></Image>
+                <View>
+                  <Text style={{ fontSize: 16, color: '#373737' }}>小幸运</Text>
+                  <Text style={{ fontSize: 14, color: '#7F7F7F' } }>2019-07-05</Text>
+                </View>
+            </View>
+            <View style={[ styles.center ]}>
+              <Image src="" style={styles.iconSize} />
+              <Text>回复</Text>
+            </View>
+          </View>
+          <View style={ styles.padding }>
+            <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
+          </View>
+          <View style={[ styles.padding, styles.column ]}>
+            <Text style={ styles.color }>卡通小熊</Text>
+            <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  courseComment: {
+    width: '100%',
+    backgroundColor: '#fff',
+    marginTop: 8,
+  },
+  padding: {
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  font: {
+    fontSize: 24,
+    color: 'black',
+    fontWeight: 'bold',
+  },
+  center: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    width: 98,
+    height: 28,
+    fontSize: 20,
+    borderRadius: 28,
+    color: 'black',
+    backgroundColor: '#F0F1F5'
+  },
+  headImg: {
+    width: 40,
+    height: 40,
+    backgroundColor: "red",
+    marginRight: 10,
+    borderRadius: 40
+  },
+  iconSize: {
+    width: 20,
+    height: 20,
+    backgroundColor: "red",
+    marginRight: 10
+  },
+  courseFont: {
+    color: '#373737',
+    fontSize: 16
+  },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: '#F3F6FF'
+  },
+  color: {
+    color: '#518AD1'
+  }
+});

pages/components/Order.js

@@ -0,0 +1,57 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { Component } from "react";
+import {
+  StyleSheet,
+  Text,
+  View
+} from "react-native";
+
+export default class Order extends Component {
+  render() {
+    return (
+      <View style={[ styles.courseList, {left: this.props.left}]}>
+        <View style={[styles.btn, { backgroundColor: '#F5CA0D'}]}>
+          <Text style={{color: '#fff', fontSize: 18}}>立即购买</Text>
+        </View>  
+        <View style={[styles.btn, { backgroundColor: '#F5880D'}]}>
+          <Text style={{color: '#fff', fontSize: 18}}>一元秒杀</Text>
+        </View> 
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  courseList: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    height: 57,
+    backgroundColor: '#fff',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingLeft: 20,
+    paddingRight: 20,
+    borderStyle: 'solid',
+    borderTopWidth: 1,
+    borderColor: '#000000'
+  },
+  btn: {
+    width: '45%',
+    height: 35,
+    borderRadius: 35,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+});

pages/components/VideoExplain.js

@@ -14,6 +14,7 @@ import {
   Image,
   ScrollView,
   StatusBar,
+  BackHandler,
   FlatList
 } from "react-native";
 import Orientation from "react-native-orientation";
@@ -55,6 +56,8 @@ export default class VideoExplain extends Component {
           needback={true}
           videoback={() => alert("videoback")}
           videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
+          onError={this.onError.bind(this)}
+          onEnd={this.onEnd.bind(this)}
           style={{
             width: "100%",
             height: this.state.video_height
@@ -102,6 +105,32 @@ export default class VideoExplain extends Component {
     }
     this.props.full(this.state.isFull);
   }
+  onError() {
+    alert("播放器异常");
+  }
+  onEnd() {
+    alert("播放结束");
+    this.video.refreshVideo();
+  }
+  componentWillMount() {
+    BackHandler.addEventListener(
+      "hardwareBackPress",
+      this.onBackAndroid.bind(this)
+    );
+  }
+  componentWillUnmount() {
+    BackHandler.removeEventListener(
+      "hardwareBackPress",
+      this.onBackAndroid.bind(this)
+    );
+  }
+  onBackAndroid() {
+    if (this.state.isFull) {
+      return true;
+    } else {
+      alert("返回。。。");
+    }
+  }
 }
 
 const styles = StyleSheet.create({