安装

• 安装
  • npm

    npm install --save react-native-video
    

  • yarn

    yarn add react-native-video
    

• ios配置
  • 安装
    cd ios执行一下命令

    pod install
    

    注:pod install需要RN版本0.60及其以上如果低于0.60需使用link
  • 启用缓存所需
    在ios/Podfile文件中，在pod 'Folly', :podspec =>.......下面添加如下

    pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'
    

• android
  • link
    直接运行react-native link如果失败需要进行手动配置
  • 手动配置
    • android/settings.gradle
      添加如下

      include ':react-native-video'
      project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
      

    • android/app/build.gradle

      dependencies {
         ...
         implementation project(':react-native-video')
      }
      

    • MainApplication.java
      顶部添加

      import com.brentvatne.react.ReactVideoPackage;
      

      重写getPackages方法

      @Override
      protected List<ReactPackage> getPackages() {
        @SuppressWarnings("UnnecessaryLocalVariable")
        List<ReactPackage> packages = new PackageList(this).getPackages();
        // Packages that cannot be autolinked yet can be added manually here, for example:
        packages.add(new ReactVideoPackage());
        return packages;
      }
      

使用

• 测试

  <Video source={{uri:"http://lilq.cn/music/te1.mp3"}}
  // Can be a URL or a local file.
  />
  

  运行出现音乐即为成功
• 基本使用

  <Video source={{uri: "background"}}             // 可以是一个 URL 或者 本地文件
         ref='video'                              //申明方便调用
         rate={this.state.rate}                   // 控制暂停/播放，0 代表暂停paused, 1代表播放normal.
         volume={1.0}                             // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
         muted={false}                            // true代表静音，默认为false.
         paused={false}                           // true代表暂停，默认为false
         repeat={true}                            // 是否重复播放
         playInBackground={false}                 // 当app转到后台运行的时候，播放是否暂停
         onBuffer={this.onBuffer}                 // 远程视频缓冲时的回调
         onEnd={this.onEnd}                       // 播放完成后的回调
         onError={this.videoError}                // 播放失败后的回调
         onProgress={(e) => this.onProgress(e)}   //进度控制，每250ms调用一次，以获取视频播放的进度
         onLoad={(e) => this.onLoad(e)}           //加载回调
  />
  

• 官网
  官网地址