React Native在Android平台运行gif的解决方法

概述

目前RN在Android平台上不支持gif格式的图片,而在ios平台是支持的,期待以后的版本中系统也是可以默认支持Android的。首先说下在ios平台怎么加载gif呢?

 <Image source= {require('./img/loading.gif')} style = {styles.loading}/>  

完整实例:

xport default class Loading extends React.Component {  
    render(){  

        if (!this.props.isShow) {  
            return <View />  
        }  

        return (  
            <View style = {styles.container}>  
                <Image source= {require('./img/loading.gif')} style = {styles.loading}/>  
            </View>  
        )  
    };  
}  

const styles = StyleSheet.create({  
  container:{  
    backgroundColor: 'transparent',  
    position: 'absolute',  
    top: 0,  
    left: 0,  
    height: Util.screenSizeUtil.height,  
    width: Util.screenSizeUtil.width,  
    alignItems: 'center',  
    justifyContent: 'center',  

  },  
  loading:{  
    height:30,  
    width:30,  
  },  
})  

RN在Android平台的解决方法

facebook fresco方法

要解决上面的问题,方法还是很多的,最简单的莫过于使用facebook的jar支持库,在android/app/build.gradle文件中新增

 compile 'com.facebook.fresco:animated-gif:0.13.0'

Fresco是一个强大的图片加载组件,Android 本身的图片库不支持此格式,但是Fresco支持。使用时,和往常一样,仅仅需要提供一个图片的URI即可,剩下的事情,Fresco会处理。 如我们运行一个名为loading.gif的图片:

<Image source={{uri:loading}} style={{width:20,height:20}}/>

当然网上还有另外的方法,就是自己去实现读取gif图片,对图片资源做拆解,这有点类似于,在很久以前,Android平台也是不支持gif的,出现了自定义view对gif图片进行拆解,然后运行image的方案。有点类似于Android的帧动画,在xml定义图片数组,然后使用Animator来加载。不过这种方法性能差。

自定义组件实现

将gif切成15张png的图片,暂且命名为loading1、loading2…. loading15。

在构造方法中初始化图片数组

//图片数组  
var loading_imgs = new Array();  
//最大图片张数  
const imageLength = 15;  
//动画使用的数组下标  
const imageIndex = 0;  


  constructor(props) {  
      super(props);  
      this.state = {  
          dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2,}),    
          ….  
          imageIndex:imageIndex,  
      };  

//组装图片数组   共15张图片  loading1  -> loading15  
      for( i=1;i<= imageLength;i++){  
        let loadingUri = "loading" + i;  
        let img = <Image source={{uri:loadingUri}} key={i} style={{width:20,height:20}}/>;  
        loading_imgs.push(img);  
      }  
  }  

也没渲染

render() {  
  return (  
      <View style={styles.container}>  
          <View style={{position:'absolute', top:-1000}}>  
            {  
              loading_imgs.map((item,i)=> loading_imgs[i])  
            }  
          </View>  
     </View>  
)}; 

轮播图片

每隔100毫秒切换一张图片,当数据加载完毕,清楚定时任务,并且将图片置为第一张。

图片轮播函数  
  _loop() {  
    this.loopCount++;  
    if (this.loopCount < loading_imgs.length) {  
        this.setState({  
            imageIndex: this.loopCount,  
        });  
    }else {  
        this.loopCount = -1;  
    }  
}  

//轮播图片  
this.timerPic = setInterval(this._loop.bind(this), 100);  

//清除图片轮播效果  
this.timer1 && clearInterval(this.timer1);  
this.loopCount = -1;  

这样就实现了自己实现对gif运行的实现,不过其性能确实太差,建议使用第一种。

附:RN知识库

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hightopo

原 Web SCADA 电力接线图工控组态

42860
来自专栏前端知识分享

Vue入门---常用指令详解

Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单、易学上手快,近两年也也别流行,发展速度较快,已...

12910
来自专栏老付的网络博客

Vuejs template快速入门

一直想写一个Vuejs的系列的博客,苦于一直没有时间,今天的这个博客也是思考了很久,打算随便写点东西,今天说说Vuejs的模版的使用。

1.6K20
来自专栏hightopo

原 荐 基于 HTML5 Canvas 的交

22140
来自专栏十月梦想

一天带你入门到放弃vue.js(二)

至此在vue中提供了计算属性,computed,在main.js指定computed对象中指定计算

26120
来自专栏互联网杂技

jQuery 升级踩坑大全

背景 jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版本。其实如果早期版本使用不当,可能会有DOMXSS漏洞,非...

65980
来自专栏Vamei实验室

被解放的姜戈05 黑面管家

Django提供一个管理数据库的app,即django.contrib.admin。这是Django最方便的功能之一。通过该app,我们可以直接经由web页面,...

22390
来自专栏向治洪

React Native在Android平台运行gif的解决方法

概述 目前RN在Android平台上不支持gif格式的图片,而在ios平台是支持的,期待以后的版本中系统也是可以默认支持Android的。首先说下在ios平台怎...

40450
来自专栏非著名程序员

基础篇章:关于 React Native 的props,state,style的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) React Native看起来很像React...

187100
来自专栏程序员的知识天地

深入解剖前端,你不知道的Web 组件标准

组件化使得复杂的前端结构变得清晰,各个部分独立起来,高内聚低耦合,使得维护成本大大降低。

10830

扫码关注云+社区

领取腾讯云代金券