React Native react-native-video 视频库

RN 项目 安装 react-native-video 视频库

# 安装 react-native-video
yarn add react-native-video

// package.json
{
  "name": "RNMyBaby",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@ant-design/react-native": "^3.1.11",
    "mockjs": "^1.0.1-beta3",
    "react": "16.8.6",
    "react-native": "0.60.4",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-video": "^5.0.0",
    "react-native-webview": "^5.12.1",
    "react-navigation": "^3.11.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "babel-plugin-import": "^1.12.0",
    "eslint": "^6.1.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

自行封装组件，参照文档配置使用

1. VideoPlayer.js 视频组件

/**
 * @Author: brady
 * @Date: 2019-08-03
 * @Last Created time: 17:36:32
 * @Description:
 */
import React, { Component } from "react";
import { StyleSheet, View, Text, Image } from "react-native";
import Video from "react-native-video";
import PropTypes from "prop-types";

type Props = {};
export default class VideoPlayer extends Component<Props> {
  // 默认属性
  static defaultProps = {};

  // 属性类型
  static propTypes = {
    video: PropTypes.string,
    options: PropTypes.object,
    author: PropTypes.object
  };

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {};
  }

  /**
   * Video 样式:
   * 1. 设置width、height 等比缩放置顶
   * 2. 使用 absolute 绝对定位，垂直居中，全屏显示
   * */

  // 渲染
  render() {
    const { video, options, author } = this.props;
    return (
      <View style={styles.container}>
        <Video
          source={{ uri: video }}
          // rate={options.rate} //1.0表示默认速率
          // volume={options.volume}  //声音大小
          // paused={options.paused}  //默认播放
          // repeat={options.repeat} //不重复播放
          // muted={options.muted} //是否静音
          controls={options.controls} // 显示控件
          resizeMode={options.resizeMode} // 等比缩放
          style={options.style} // 样式
          // onLoadStart={}//视频开始播放的时候调用方法
          // onLoad={} //不断调用
          // onProgress={}//播放时，每隔250ms，发送请求，附带当前播放时间
          // onEnd={}//播放结束
          // onError={}//遇到错误时
          // ref={ref => (this.player = ref)}
          // onBuffer={}
        />
        <View style={styles.authorInfo}>
          <View style={styles.infoLeft}>
            <Image
              source={{ uri: author.avatar }}
              style={styles.authorHeader}
            />
          </View>
          <View style={styles.infoRight}>
            <Text>{author.nickname}</Text>
            <Text>{author.desc}</Text>
          </View>
        </View>
      </View>
    );
  }

  componentDidMount() {
    console.log(this.props);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: "center",
    // alignItems: "center",
    backgroundColor: "#FCF5FF"
  },
  authorInfo: {
    padding: 12,
    flexDirection: "row",
    // alignItems: "center"
  },
  authorHeader: {
    width: 64,
    height: 64,
    borderRadius: 32
  },
  infoRight: {
    flex: 1,
    marginLeft: 8
  }
});

2. VideoDetail.js 视频详情组件

/**
 * @Author: brady
 * @Date: 2019-08-02
 * @Last Created time: 22:01:51
 * @Description:
 */
import React, { Component } from "react";
import { StyleSheet, View, Text, Dimensions } from "react-native";
import VideoPlayer from "../components/VideoPlayer";

// Dimensions 用于获取设备宽、高、分辨率
const { width, height } = Dimensions.get("window");

type Props = {};
export default class VideoDetail extends Component<Props> {
  // 默认属性
  static defaultProps = {};

  // 属性类型
  static propTypes = {};

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      options: {
        rate: 1.0, // 1.0表示默认速率
        volume: 3, // 声音大小
        paused: false, // 默认播放
        repeat: false, // 不重复播放
        muted: false, // 是否静音
        controls: true, // 显示控件
        resizeMode: "contain", // 等比缩放
        style: styles.backgroundVideo // 样式
      }
    };
  }

  // 渲染
  render() {
    const { params } = this.props.navigation.state;
    return (
      <View style={styles.container}>
        <VideoPlayer
          video={params.video}
          options={this.state.options}
          author={params.author}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: "center",
    // alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  backgroundVideo: {
    width: width,
    height: (width * 9) / 16,
    // position: "absolute",
    // top: 0,
    // left: 0,
    // bottom: 0,
    // right: 0,
    backgroundColor: "#000"
  }
});

注：

1. 如需全屏展示，使用 backgroundVideo 样式中的 绝对定位 样式。
2. 如需置顶显示，使用 backgroundVideo 样式中的 宽、高等比缩放样式。
3. 其他配置请参照官方文档：https://github.com/react-native-community/react-native-video

具体效果如下：