react-native-viode

react-native录音组件

github地址：react-natitve-video

版本

版本4.x  对应的是react-native 0.57.0以上的版本
版本3.x  对应的是react-naitve 0.40.0以上的版本

安装 react-native-video

使用npm : 
<pre>
  npm install --save react-native-video
</pre>
或者使用yarn:
<pre>
  yarn add react-native-video
</pre>
根据需求在你的项目中引用react-native-video

--iOS--

1：ios可以在项目中执行 react-native link react-native-video �来导入react-natie-viode依赖
2：通过使用CocoaPods的方式，在你项目的Podfile文件中添加
   <pre>
      pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' 
   </pre>
   <pre>
      pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'
   </pre>

--Android--

1：android可以通过执行 react-native link react-native-video 来导入react-native-video依赖
2：配置android/setting.gradle文件
   <pre>
     include ':react-native-video'
   </pre>
   <pre>
     project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
   </pre>
3:android/app/build.gradle中新增
   <pre>
     dependencies {
     ...
     compile project(':react-native-video')
     }
   </pre>
4:MainApplication.java中新增
    import com.brentvatne.react.ReactVideoPackage;

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

具体RN使用示例

// Load the module
import Video from 'react-native-video'  
// ***************************
<Video
    source={require('../src/img/moments.mp4')}   //设置本地视频地址   
    // source={{uri:'https:***.***'}}            //设置在线视频地址
    ref={(ref)=>{
        this.player = ref
    }}
    onBuffer={this.onBuffer}                     //视频缓冲回调
    onEnd = {this.onEnd}                         //播放结束后的回调
    onError = {this.onError}                     //播放失败后的回调
    style = {styles.backgroundVideo}             //样式设置
    />