Merge branch 'master' of http://gogs.efunbox.cn/Rorschach/efunbox-mobile-8

pages/CourseDetails.js

@@ -17,31 +17,49 @@ import {
 } from "react-native";
 
 import VideoExplain from './components/VideoExplain'
+import CourseListRow from './components/CourseListRow'
+// import CourseListLine from './components/CourseListLine'
 
-class CourseList extends Component {
+export default class CourseDetails extends Component {
+  state () {
+    return {
+      fullStyle: {}
+    }
+  }
   render() {
     return (
-      <View style={styles.courseList}>
-        <View style={[styles.padding, styles.title]}>
-
+      <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>
+        <View style={ this.state.fullStyle }>
+          <CourseListRow title={'课件'}></CourseListRow>
+          <CourseListRow title={'课件'}></CourseListRow>
+          <CourseListRow title={'课件'}></CourseListRow>
+        </View> 
+      </ScrollView>
     );
   }
-}
+  full(isFull){
+    if(isFull) {
+      // 全屏时隐藏多余的view
+      this.setState({
+        fullStyle: {}
+      })
+    }else {
+      // 全屏时隐藏多余的view
+      this.setState({
+        fullStyle: {
+          display: 'none'
+        }
+      })
+    }
 
-export default class CourseDetails extends Component {
-  render() {
-    return (
-      <ScrollView style={{backgroundColor: '#F0F1F5'}}>
-        <VideoExplain 
-        title={'同步辅导语文一年级下册'}
-        details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
-        uri={'http://chimee.org/vod/1.mp4'}
-        />
-        <CourseListRow title={'课件'}></CourseListRow>
-      </ScrollView>
-    );
   }
 }
 

pages/components/CourseListLine.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 CourseListLine extends Component {
+  render() {
+    return (
+      <View style={styles.courseList}>
+        <View style={[styles.padding, styles.title]}>
+          <Text style={styles.font}>{this.props.title}</Text>
+          <Text style={styles.color}>共28课</Text>
+        </View>
+
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  courseList: {
+    width: '100%',
+    backgroundColor: '#fff',
+    marginTop: 8,
+  },
+  padding: {
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  title: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  font: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    fontSize: 18,
+    color: 'black',
+    fontWeight: 'bold',
+  },
+  clor: {
+    fontSize: 14,
+    color: 'black',
+  },
+});

pages/components/VideoExplain.js

@@ -13,78 +13,133 @@ import {
   View,
   Image,
   ScrollView,
+  StatusBar,
   FlatList
 } from "react-native";
-
-import CusVideo from './CusVideo'
+import Orientation from "react-native-orientation";
+import CusVideo from "./CusVideo";
+// 获取屏幕宽高
+import { Dimensions } from 'react-native'
+const { height, width } =  Dimensions.get('window');
 
 export default class VideoExplain extends Component {
-  // static propTypes = {
-  //   uri: PropTypes.string,
-  //   title: PropTypes.string,
-  //   details: PropTypes.string,
-  // };
+  static propTypes = {
+    // uri: PropTypes.string,
+    // title: PropTypes.string,
+    // details: PropTypes.string,
+  };
+  state = {
+    isFull: false,
+    video_height: 210,
+    statusbar_hidden: false,
+    videoStyle: {
+      width: "100%"
+    }
+  };
+
   render() {
     return (
-      <View>
-        <CusVideo uri={this.props.uri} style={{width: '100%', height: 210}}/>
+      <View style={this.state.videoStyle}>
+        <StatusBar
+          // backgroundColor={"transparent"}
+          barStyle={"dark-content"}
+          backgroundColor={"white"}
+          translucent={false}
+          hidden={this.state.statusbar_hidden}
+        />
+        {/* <View style={{ width: "100%", height: 210 }} /> */}
+        <CusVideo
+          show={true} //是否显示
+          uri={this.props.uri} //播放路径
+          ref={view => (this.video = view)} //设置ID
+          needback={true}
+          videoback={() => alert("videoback")}
+          videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
+          style={{
+            width: "100%",
+            height: this.state.video_height
+          }}
+        />
         <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>
+              <Image src="" style={styles.iconSize} />
+              <Image src="" style={styles.iconSize} />
             </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>
+          <Text style={styles.clor}>{this.props.details}</Text>
         </View>
       </View>
     );
   }
+  fullScreenPlayer() {
+    if (!this.state.isFull) {
+      Orientation.lockToLandscape();
+      this.setState({
+        statusbar_hidden: true,
+        isFull: true,
+        video_height: "100%",
+        videoStyle: {
+          width: "100%",
+          height: width
+        }
+      });
+    } else {
+      Orientation.lockToPortrait();
+      this.setState({
+        statusbar_hidden: false,
+        isFull: false,
+        video_height: 210,
+        videoStyle: {
+          width: "100%"
+        }
+      });
+    }
+    this.props.full(this.state.isFull);
+  }
 }
 
 const styles = StyleSheet.create({
   videoExplain: {
-    width: '100%',
-    backgroundColor: 'white',
+    width: "100%",
+    backgroundColor: "white",
     paddingLeft: 20,
     paddingRight: 20,
     paddingTop: 13,
     paddingBottom: 13
   },
   title: {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   font: {
     fontSize: 18,
-    color: 'black',
-    fontWeight: 'bold',
+    color: "black",
+    fontWeight: "bold"
   },
   clor: {
     fontSize: 14,
-    color: 'black',
+    color: "black"
   },
   icon: {
-    display: 'flex',
-    flexDirection: 'row',
+    display: "flex",
+    flexDirection: "row"
   },
   iconSize: {
     width: 20,
     height: 20,
-    backgroundColor: 'red',
+    backgroundColor: "red",
     marginLeft: 10
   },
   tops: {
-    marginTop: 18,
+    marginTop: 18
   }
 });