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

---