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

概述

目前RN在Android平台上不支持gif格式的图片，而在iOS平台是支持的，期待以后的版本中系统也是可以默认支持android的。首先说下在ios平台怎么加载gif呢？http://blog.csdn.net/xiangzhihong8/article/details/55803237?1487761206687

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

完整实例：

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,    },  })  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

RN在Android平台的解决方法

facebook fresco方法

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

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

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

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

当然网上还有另外的方法，就是自己去实现读取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);        }    }  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

也没渲染

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

轮播图片

每隔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;  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

附：RN知识库