React Native在Android平台运行gif的解决方法
来源:互联网 发布:远程考试软件 编辑:程序博客网 时间:2024/06/04 17:47
概述
目前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 0
- React Native在Android平台运行gif的解决方法
- React Native在Android平台运行gif的解决方法
- React-Native 在android写不支持gif
- react-native之tabBar在Android平台上的实现
- React-Native 在android不支持gif图 -- 解决方案!(转)
- 《React-Native系列》35、 RN在Android下支持gif的另一种方案
- 《React-Native系列》35、 RN在Android下支持gif的另一种方案
- 0 如何在Android和iOS平台运行React Native应用
- Android React Native在Android Studio中执行bundleReleaseJsAndAssets 打包失败的解决方法
- react-native 在android运行时报UNEXPECTED TOP-LEVEL EXCEPTION
- React-Native在6.0以下Android手机运行调试
- React Native Android 虚拟机运行
- react native 在设备在运行时的问题
- react native gif支持
- win10环境下在android studio的模拟器中运行react native。
- 《React-Native系列》21、 解决RN在Android下不支持gif问题
- 《React-Native系列》21、 解决RN在Android下不支持gif问题
- React Native提高在模拟器上的运行速度
- MVP设计模式的一次深入探索和优化
- 获取表单数据的四种方法
- 我目前常用的几种Java快捷键
- QDebug
- Poj 3074: Sudoku
- React Native在Android平台运行gif的解决方法
- 朝花夕拾(5)常用正则
- 搜索剪枝
- 架构设计之APP研发录学习笔记
- Swift3.0二维码扫描实现(写一个仿支付宝二维码扫描的效果)
- Hadoop源码分析之心跳机制
- JQ实际项目中经常用到的知识点--总结
- headfirst设计模式(2)—观察者模式
- Layout POJ - 3169(差分约束) 题解