《React-Native系列》21、 解决RN在Android下不支持gif问题

由于RN在Android平台上不支持gif格式的图片，今天介绍下我们是怎么处理这个问题的。

先来看看我们需要实现的效果，这是一张gif图片，当我们列表上拉加载下一页的时候需要使用这个效果，如下图：

我们的解决方案是：将gif切成15张png的图片，暂且命名为loading1、loading2.... loading15

然后循环的setState修改图片，就像看电影一样，达到动画的效果。

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

[javascript]  view plain  copy

 

1. //图片数组  
2. var loading_imgs = new Array();  
3. //最大图片张数  
4. const imageLength = 15;  
5. //动画使用的数组下标  
6. const imageIndex = 0;  
7.   
8.   
9.   constructor(props) {  
10.       super(props);  
11.       this.state = {  
12.           dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2,}),    
13.           ….  
14.           imageIndex:imageIndex,  
15.       };  
16.         
17. //组装图片数组   共15张图片  loading1  -> loading15  
18.       for( i=1;i<= imageLength;i++){  
19.         let loadingUri = "loading" + i;  
20.         let img = <Image source={{uri:loadingUri}} key={i} style={{width:20,height:20}}/>;  
21.         loading_imgs.push(img);  
22.       }  
23.   }  

2、预加载图片数组

为什么要预加载？

刚开始我们做的时候，也没有预加载，只是在构造方法中定义了图片数组loading_imgs，但是在真机上看的时候，发现图片播放的时候第一次会很卡顿，这是因为图片加载到内存需要时间，当我们轮播图片的时候图片还没有加载完毕，在视觉上造成卡顿的效果。

我们是把图片数组初始化在屏幕外面（绝对定位），这种方式不太好。

[javascript]  view plain  copy

 

1. render() {  
2.   return (  
3.       <View style={styles.container}>  
4.           <View style={{position:'absolute', top:-1000}}>  
5.             {  
6.               loading_imgs.map((item,i)=> loading_imgs[i])  
7.             }  
8.           </View>  
9.      </View>  
10. )};  

3、轮播图片

定义图片轮播函数_loop

每隔100毫秒切换一张图片

当数据加载完毕，清楚定时任务，并且将图片置为第一张

[javascript]  view plain  copy

 

1.  图片轮播函数  
2.   _loop() {  
3.     this.loopCount++;  
4.     if (this.loopCount < loading_imgs.length) {  
5.         this.setState({  
6.             imageIndex: this.loopCount,  
7.         });  
8.     }else {  
9.         this.loopCount = -1;  
10.     }  
11. }  
12.   
13. //轮播图片  
14. this.timerPic = setInterval(this._loop.bind(this), 100);  
15.   
16. //清除图片轮播效果  
17. this.timer1 && clearInterval(this.timer1);  
18. this.loopCount = -1;  

这样我们就实现上gif的效果。

在我们做的过程中也发现了一个RN的组件ActivityIndicator的bug，

[javascript]  view plain  copy

 

1. <ActivityIndicator  
2.                 animating={true}  
3.                 size="small"  
4.               />  

当我们给 ActivityIndicator 设置color的时候，在锤子手机上默认color是灰色，当设置为red时，动画效果没有。

在meizu手机上，默认是绿色，设置为red时，效果正常。

在Android平台上，RN的坑不是一点点啊。