Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> 《React-Native系列》21、 解決RN在Android下不支持gif問題

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

編輯:關於Android編程

由於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的坑不是一點點啊。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved