ReactNative之Video组件攻略

GitHub地址

安装步骤

• Android:

npm install --save react-native-video    /     yarn add react-native-video

自动配置：

react-native link react-native-video        链接react-native-video库

如果配置失败需要手动配置.

• android/settings.gradle

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

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

基本使用方法：

 this.state = {
      rate: 1,
      volume: 1,
      muted: false,
      resizeMode: 'contain',
      duration: 0.0,
      currentTime: 0.0,
      paused: true,
    };


    <Video
          source={require('./abc.mp3')}                     // 可以是一个 URL 或者 本地文件
          // style={styles.xxx}                             //CSS样式
          rate={this.state.rate}                            //播放速率
          paused={this.state.paused}                        //暂停
          volume={this.state.volume}                        //调节音量
          muted={this.state.muted}                          //控制是否静音
          resizeMode={this.state.resizeMode}                //缩放模式
          onLoad={this.onLoad}                              //加载并准备播放时调用的回调
          onProgress={this.onProgress}                      //视频播放过程中每个间隔进度单位调用的回调
          onEnd={this.onEnd}                                //播放结束时的回调
          onAudioBecomingNoisy={this.onAudioBecomingNoisy}  //音频变得嘈杂时的回调 - 应暂停视频
          onAudioFocusChanged={this.onAudioFocusChanged}    //音频焦点丢失时的回调 - 如果焦点丢失则暂停
          repeat={false}                                    //是否重播
        />