React native 第三方组件 React-native-

简介

这个组件封装了React-Native平台的播放器组件Video

使用方法:

1.安装:

1. 执行命令:

npm i -S react-native-video

2. 重新编译项目,执行命令:

react-native link

2.导入原生模块

1. iOS 11平台首先找到AppDelegate.m文件,
2. 首先导入包，在此文件顶部添加如下代码:
   #import <AVFoundation/AVFoundation.h>
3. 然后,修改代码:

    ...
    [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
    ...
}

2. Android 平台相对复杂:

1. 首先，找到 android/settings.gradle 这个文件，在其中加入以下代码：
   ``` include ':react-native-video'
    project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')```
2. 找到 android/app/build.gradle 这个文件，在 * dependencies *大括号的方法中添加如下代码：
    ```compile project(':react-native-video')```
就像这样：
    ``` 
dependencies {
       compile project(':react-native-video')
    }```

3. 如果你的 react-native版本<0.29，那么找到MainActivity.java 这个文件，在最顶部添加：```import com.brentvatne.react.ReactVideoPackage;```
并且在下面的代码中添加：new ReactVideoPackage()

   如果你的 react-native版本>=0.29，那么就找到MainApplication.java这个文件，在顶部添加：```import com.brentvatne.react.ReactVideoPackage;```

   并且在下面的代码中添加：new ReactVideoPackage()

   就像这样：

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new ReactVideoPackage()
  );
}

### 3. 使用例子:

<Video source={{uri: "background"}} // 视频的URL地址，或者本地地址，都可以.
rate={1.0} // 控制暂停/播放，0 代表暂停paused, 1代表播放normal.
volume={1.0} // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
muted={false} // true代表静音，默认为false.
paused={false} // true代表暂停，默认为false
resizeMode="cover" // 视频的自适应伸缩铺放行为，
repeat={true} // 是否重复播放
playInBackground={false} // 当app转到后台运行的时候，播放是否暂停
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
onLoadStart={this.loadStart} // 当视频开始加载时的回调函数
onLoad={this.setDuration} // 当视频加载完毕时的回调函数
onProgress={this.setTime} // 进度控制，每250ms调用一次，以获取视频播放的进度
onEnd={this.onEnd} // 当视频播放完毕后的回调函数
onError={this.videoError} // 当视频不能加载，或出错后的回调函数
style={styles.backgroundVideo} />
// 样式
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});