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组件

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

---

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
  ...
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

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


});

Android扩展文件使用

//在你的渲染功能，假设你有一个名为
// “background.mp4”在您的扩展文件。只需添加主要和（如果适用）补丁版本
< Video source = {{uri： “ background ”，mainVer： 1，patchVer： 0 }} //在给定的扩展版本中查找.mp4文件（background.mp4）。
       rate = { 1.0 }                    // 0暂停，1是正常的。
       volume = { 1.0 }                  // 0静音，1是正常的。
       muted = { false }                 //完全静音。
       paused = { false }                //完全暂停播放。
       resizeMode = “ cover ”            //以纵横比填充整个屏幕。
       repeat = { true }                 //永远重复。
       onLoadStart = { this。loadStart } //视频开始加载时的回调 
       onLoad = { this。setDuration }     //视频加载时的回调 
       onProgress = { this。时刻设定 }     //回调每250毫秒〜与currentTime的 
       onEnd = {此。onEnd }            //播放完成时的回调 
       onError = { this。videoError }     //视频无法加载时回调 
       style = { styles。backgroundVideo } / >

在iOS背景播放

要使音频在iOS背景下播放，需要将音频会话设置为AVAudioSessionCategoryPlayback

---