RN开源组件react-native-video的用法

最近做的一个RN项目，需要用到Video组件，首当其冲，自然就是react-native-video了。

react-native-video：一个RN的Video组件

关于react-native-video的用法，其实npm官网上已经说的很清楚了，但对于初学者来说，可能还要踩一些坑，正好现在用到，记录下详细使用步骤吧。

IOS平台的用法很简单，就不多说，这里我只说下Android平台上的，同时我也是在Android平台上使用，下面所说的每一个步骤，都是经过我亲自检验的。

1. 安装模块

首先，在初始化了RN项目之后，通过npm在项目中添加react-native-video：

npm install react-native-video –save

RN不像原生Andriod或者IOS，RN在开发的时候，是可以动态刷新查看效果，类似于混合App的开发，但是又不同于混合App，一些原生开发的组件，是无法做到直接动态刷新的，想要在引入原生组件之后，还能看到效果，一个办法就是重新编译安装一遍，但是这种方法明显太浪费时间，另外一个方法就是使用rnpm。

rnpm也是一个npm模块，可以使用npm添加到项目中：

npm install rnpm –save

所以在安装完react-native-video以及rnpm之后，需要继续在控制台中输入:

rnpm link react-native-video
或者直接 rnpm link

除了react-native-video之外，以下组件都是原生开发，wrapper了一层js，因此在使用的时候，都需要link .a到project中：

react-native-vector-icons//字体图标

react-native-image-picker//读入照片

react-native-camera//相机

react-native-linear-gradient//颜色渐变

react-native-search-bar//search bar

react-native-tableview//原生的tableview，可以在list右侧显示索引
react-native-video  //Video组件

2.引入原生模块

因为react-native-video是原生组件，所以安装完react-native-video之后，还需要修改Java代码。

详细步骤如下：

2.1 IOS平台

如果是IOS平台，那么就比较简单了，找到AppDelegate.m文件：

  1. 首先导入包，在此文件顶部添加如下代码:
  `#import <AVFoundation/AVFoundation.h>`

2. 然后，修改下面的代码：
(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions
{
...
  [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];  // allow
...
}

2.1 Andriod平台

Andriod平台稍微麻烦一点。

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. 使用方法

借鉴npm官网上的例子：

<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,
  },
});

秒客网