《React-Native系列》21、 解決RN在Android下不支持gif問題

由於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 = 

; loading_imgs.push(img); } }

 

2、預加載圖片數組

為什麼要預加載？

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

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

  render() {
    return (
        
            
              {
                loading_imgs.map((item,i)=> loading_imgs[i])
              }
            
       
  )};

 

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;

這樣我們就實現上gif的效果。

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

當我們給ActivityIndicator設置color的時候，在錘子手機上默認color是灰色，當設置為red時，動畫效果沒有。

在meizu手機上，默認是綠色，設置為red時，效果正常。

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