React Native Gif图插件封装

发布时间：2020-12-15 06:29:03 所属栏目：百科来源：网络整理

导读：React Native Gif图插件，已在Github开源，猛戳:react-native-gifview 关于如何封装原生组件的教程，可以参考我之前的文章： React Native 封装Android原生组件最详教程功能支持：加载、播放、暂停等。一、配置【 Android 平台配置】 1. 将android_gifvi

React Native Gif图插件，已在Github开源，猛戳:react-native-gifview

关于如何封装原生组件的教程，可以参考我之前的文章： React Native 封装Android原生组件最详教程

功能支持：加载、播放、暂停等。

一、配置

【 Android 平台配置】

1. 将android_gifview文件夹拖入android工程包名目录下，例如 com.xxx。

2. 打开android_gifview下文件，将最顶部package com.xxx中xxx替换成自己对应包名。

3. 在MainApplication中的getPackages方法中注册Package:

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),GifViewPackage()
      );
    }

4.在app/build.gradle文件下添加依赖：

dependencies {
    compile 'pl.droidsonroids.gif:android-gif-drawable:1.2.12'
} 
 

【 iOS 平台配置】

将ios_gifview文件夹拖入工程目录下即可，如下图

#### 二、使用

1.将RCTGIFView.js导入RN工程

2.将RCTGIFView作为Component导入,并在render中渲染:

import RCTGIFView from './RCTGIFView';
render() {
    return (
      <View style={ styles.container }>
        <RCTGIFView 
          style={ styles.gifImage } 
          imageName={ this.state.gifImage }
          playStatus={ this.state.isPlaying }
        />
      </View>
    );
  } 
 

3.属性介绍

（1）playStatus: 控制gif图的播放桩体，true为播放，false为暂停

（2）imageName: gif图URL，em:https://cimili-cdn-gif-of-track.cimili.com/v2_gif_266_6967.gif

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!