课程详情页完善

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/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() {
@@ -67,8 +70,12 @@ export default class VideoExplain extends Component {
           <View style={styles.title}>
             <Text style={styles.font}>{this.props.title}</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,9 +113,11 @@ export default class VideoExplain extends Component {
     }
     this.props.full(this.state.isFull);
   }
+  // 播放器异常
   onError() {
     alert("播放器异常");
   }
+  // 播放结束
   onEnd() {
     alert("播放结束");
     this.video.refreshVideo();
@@ -124,6 +134,7 @@ export default class VideoExplain extends Component {
       this.onBackAndroid.bind(this)
     );
   }
+  // 播放器返回
   onBackAndroid() {
     if (this.state.isFull) {
       return true;
@@ -131,6 +142,24 @@ export default class VideoExplain extends Component {
       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 +194,6 @@ const styles = StyleSheet.create({
   iconSize: {
     width: 20,
     height: 20,
-    backgroundColor: "red",
     marginLeft: 10
   },
   tops: {