react native视频播放器——react-native-video

2016-12-26    分类: react native

安装:

npm i -S react-native-video
// npm install react-native-video --save

 

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

http://blog.csdn.net/DeepLies/article/details/53054628

react native视频播放是调用了原生组件,所以需要在执行以下代码:

rnpm link react-native-video

(这里的rnpm需要用npm额外安装   npm install rnpm -g)

 

使用:

var Video=require('react-native-video').default;

<Video
 ref='videoPlayer' //设置组件类型,类似于input的type
 source={{uri:'http://xxx.com/1.mp4'}} //视频地址
 style={styles.video} //视频样式
 volume={1}
 paused={false}
 rate={this.state.rate}
 muted={this.state.muted}
 resizeMode={this.state.resizeMode}
 repeat={this.state.repeat}

 onLoadStart={this._onLoadStart}
 onProgress={this._onProgress}
 onEnd={this._onEnd}
/>

 

RN不同版本有不同的坑, react-native-video也一样

react-native-video获取视频时间总长度

解决:react-native-video不能回调的问题