React Native在Android平台运行gif的解决方法
时间:2022-04-27
本文章向大家介绍React Native在Android平台运行gif的解决方法,主要内容包括概述、RN在Android平台的解决方法、自定义组件实现、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
概述
目前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知识库
- Python爬虫(二十三)_selenium案例:动态模拟页面点击
- Python爬虫(二十四)_selenium案例:执行javascript脚本
- Kubernetes服务网格(第10部分):服务网格API
- Python爬虫Scrapy(二)_入门案例
- python_IO编程
- Python爬虫(十七)_糗事百科案例
- 上千亿巨头撑腰 双拼妥妥被他拿了
- Python爬虫(十八)_多线程糗事百科案例
- Python爬虫(十九)_动态HTML介绍
- Python爬虫(二十)_动态爬取影评信息
- Python爬虫(二十一)_Selenium与PhantomJS
- Python爬虫(十三)_案例:使用XPath的爬虫
- Python爬虫(十四)_BeautifulSoup4 解析器
- Python爬虫(十五)_案例:使用bs4的爬虫
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浅谈laravel数据库查询返回的数据形式
- PHP设计模式之策略模式(Strategy)入门与应用案例详解
- 基于Python3读写INI配置文件过程解析
- laravel 解决paginate查询多个字段报错的问题
- php判断/计算闰年的方法小结【三种方法】
- Laravel定时任务的每秒执行代码
- PHP学习记录之面向对象(Object-oriented programming,OOP)基础【类、对象、继承等】
- Python通过zookeeper实现分布式服务代码解析
- laravel 实现向公共模板中传值 (view composer)
- PHP学习记录之面向对象(Object-oriented programming,OOP)基础【接口、抽象类、静态方法等】
- laravel 解决crontab不执行的问题
- PHP+Redis开发的书签案例实战详解
- Python持续监听文件变化代码实例
- laravel框架如何设置公共头和公共尾
- PHP结合Redis+MySQL实现冷热数据交换应用案例详解