课程详情页播放器调用

pages/CourseDetails.js

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

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
   }
 });