react-native-vlc-media-player直播功能

找了很多直播库，但是配置多的头大，要么就是版本问题，最后发现一个配置极其简单的库https://github.com/razorRun/react-native-vlc-media-player

安装：

yarn add react-native-vlc-media-player --save

react-native link react-native-vlc-media-player

使用：

import { VLCPlayer, VlCPlayerView } from 'react-native-vlc-media-player';


      this.state = {
          playerUrl:'rtmp://58.200.131.2:1935/livetv/hunantv'
      };


<VlCPlayerView
         autoplay={true}               //视屏播放结束时调用this.vlcPlayer.resume(false)方法 这个参数需要true
         ref={ref => (this.vlcPlayer = ref)}
         url={this.state.playerUrl}           //视频url
         Orientation={Orientation}
         //BackHandle={BackHandle}
         ggUrl=""                      // 广告url
         showGG={false}                 // 是否显示广告
         showTitle={true}              // 是否显示标题
         title=""                      // 标题
         showBack={false}               // 是否显示返回按钮
         paused={false}
         onLeftPress={()=>{}}          // 返回按钮点击事件
         // onOpen={this.onOpen.bind(this)}
         // onPlaying={this.onPlaying.bind(this)}
         // onProgress={this.onProgress.bind(this)}
         // onPaused={this.onPaused.bind(this)}
         // onStopped={this.onStopped.bind(this)}
         // onIsPlaying={this.onIsPlaying.bind(this)}
         // onBuffering={this.onBuffering.bind(this)}
         // onEnded={this.onEnded.bind(this)}
         // onError={this.onError.bind(this)}
         startFullScreen={() => {
         this.setState({
               isFull: true,
               });
           }}
            closeFullScreen={() => {
                    this.setState({
                      isFull: false,
                      });
                    }}
          />

注意：
1、在安装完后react-native run-android可能会报错,到MainApplication.java文件中把
new ReactVlcPlayerPackage(), 为 new ReactVlcPlayerPackage(); 后面是分号

2、再次运行会报红说有个
@react-native-community/toolbar-android的库找不到，直接yarn add @react-native-community/toolbar-android 接着react-native link @react-native-community/toolbar-android

然后在 MainApplication.java中 new ReactToolbarPackage(),改为 new ReactToolbarPackage();
关掉node,卸载调试app 再次react-native run-android 即可

作者：物联白菜
链接：https://www.jianshu.com/p/9d1d40c88cfe
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。