由於RN在Android平臺上不支援gif格式的圖片，今天介紹下我們是怎麼處理這個問題的。

先來看看我們需要實現的效果，這是一張gif圖片，當我們列表上拉載入下一頁的時候需要使用這個效果，如下圖：

我們的解決方案是：將gif切成15張png的圖片，暫且命名為loading1、loading2.... loading15

然後迴圈的setState修改圖片，就像看電影一樣，達到動畫的效果。

1、在構造方法中初始化圖片陣列

//圖片陣列
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);
      }
  }
 

2、預載入圖片陣列

為什麼要預載入？

剛開始我們做的時候，也沒有預載入，只是在構造方法中定義了圖片陣列loading_imgs，但是在真機上看的時候，發現圖片播放的時候第一次會很卡頓，這是因為圖片載入到記憶體需要時間，當我們輪播圖片的時候圖片還沒有載入完畢，在視覺上造成卡頓的效果。

我們是把圖片陣列初始化在螢幕外面（絕對定位），這種方式不太好。

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

3、輪播圖片

定義圖片輪播函式_loop

每隔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;
 

在我們做的過程中也發現了一個RN的元件ActivityIndicator的bug，

<ActivityIndicator
                animating={true}
                size="small"
              />

在meizu手機上，預設是綠色，設定為red時，效果正常。

在Android平臺上，RN的坑不是一點點啊。