react-native-video中加载中loading的使用

一、简介

react-native-video是一个可以播放视频的组件，它的用法简单，功能完备，是React native项目中很好用的一个Video播放的组件。

本文较多的功能并没有使用，只是简单地让视频在APP中展示，因为是点小图标然后再弹框中播放视频，所以需要加loading

主要用到以下

支持定制样式，比如设置宽高
主要在onLoadStart，onReadyForDisplay 这两个视频加载周期中展示loading，给用户反馈在视频加载初始，给一个loading提示

二、使用

使用步骤如下：

导入依赖库

在项目Terminal中输入命令行：

npm install react-native-video --save

或者用yarn：

yarn add react-native-video

因为用的react-native版本够高，所以并不需要其他麻烦的配置问题，安装好即可使用。

因为业务需求，用到了teaset的overlay,和modalindicator组件，

下面是引用


import { Overlay, ModalIndicator } from 'teaset';

import Video from 'react-native-video';

代码

  onVideoPress(index, list,fileId) {
    let videoUrl = list[index].fileUrl;
    let pressView = this.refs['itvideo' + fileId];
    pressView.measure((x, y, width, height, pageX, pageY) => {
      let overlayView = (
        <Overlay.PopView
          style={{}}
          containerStyle={{ flex: 1 }}
          overlayOpacity={1}
          type="custom"
          customBounds={{ x: pageX, y: pageY, width, height }}
          ref={v => (this.fullImageView = v)}>
            <TouchableOpacity style={styles.videoBox} onPress={() => this.fullImageView && this.fullImageView.close()}>
              <Video source={{uri: videoUrl}}   // Can be a URL or a local file.
                ref={(ref) => {
                  this.player = ref
                }}   
                autoPlay={true} 
                repeat={true} 
                resizeMode="cover"
                // controls={true}   
                fullScreen={true}                 
                onLoadStart={this.onLoadStart}   
                onReadyForDisplay={this.onReadyForDisplay}             // Callback when remote video is buffering
                onError={this.videoError}      
                onPress={() => this.fullImageView && this.fullImageView.close()}         // Callback when video cannot be loaded
                style={styles.backgroundVideo} />
            </TouchableOpacity>
        </Overlay.PopView>
      );
      Overlay.show(overlayView);
    });
  }

  onLoadStart = (bb)=>{
    this.showVideoLoading();
  }
  onReadyForDisplay=(cc)=>{
    this.hideLoading();
  }

  showVideoLoading() {
    ModalIndicator.show(`视频加载中，请稍等`);
  }
  hideLoading() {
    setTimeout(()=>{
      ModalIndicator.hide();
    },100)
  }

<TouchableOpacity
            key={index}
            style={styles.partImage}
            ref={'itvideo' + item.fileId}
            onPress={() => this.onVideoPress(index, list,item.fileId)}>
            <Image key={index} source={require('../../assets/filevideo.png')} style={styles.partImage} />
            {showDelete?
              <TouchableOpacity style={styles.deleteBtn} onPress={() => this.actionShow(item, index, list)}>
                <Icon name="guanbi1" size={hp(1)} color="#FFFFFF" />
              </TouchableOpacity>
            :null}
</TouchableOpacity>

效果如图