efunbox-mobile-8/pages/components/VideoExplain.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  StatusBar,
  BackHandler,
  FlatList
} from "react-native";
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,
  };
  state = {
    isFull: false,
    video_height: 210,
    statusbar_hidden: false,
    videoStyle: {
      width: "100%"
    }
  };

  render() {
    return (
      <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)}
          onError={this.onError.bind(this)}
          onEnd={this.onEnd.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 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>
        </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);
  }
  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({
  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
  }
});