React Native Gif图插件封装

前端之家收集整理的这篇文章主要介绍了React Native Gif图插件封装前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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
原文链接:https://www.f2er.com/react/301634.html

猜你在找的React相关文章