《React-Native系列》35、 RN在Android下支持gif的另一種方案

在前面的文章中，我們介紹過在RN中Android如果處理Gif格式的圖片。

我們是把圖片切成n張，如果利用定時器去輪播圖片。

這種方案存在的問題：

1、需要預加載n張圖片，哪怕頁面最後不使用gif，n張圖片也會被加載到內存；

2、需要自己處理定時器邏輯；

有沒有什麼更好的方式呢？

好，我們今天再介紹另一種方式。

先說使用方法：

在build.gradle 中加入：

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

然後就可以直接使用了，對，就這麼簡單。

Fresco是一個強大的圖片加載組件，官方網址：http://www.fresco-cn.org/ 中文文檔，很方便查閱。

Image Pipeline

Fresco 中設計有一個叫做Image Pipeline的模塊。它負責從網絡，從本地文件系統，本地資源加載圖片。為了最大限度節省空間和CPU時間，它含有3級緩存設計（2級內存，1級磁盤）。

Drawees

Fresco 中設計有一個叫做Drawees模塊，它會在圖片加載完成前顯示占位圖，加載成功後自動替換為目標圖片。當圖片不再顯示在屏幕上時，它會及時地釋放內存和空間占用。

特性

內存管理

解壓後的圖片，即Android中的Bitmap，占用大量的內存。大的內存占用勢必引發更加頻繁的GC。在5.0以下，GC將會顯著地引發界面卡頓。

在5.0以下系統，Fresco將圖片放到一個特別的內存區域。當然，在圖片不顯示的時候，占用的內存會自動被釋放。這會使得APP更加流暢，減少因圖片內存占用而引發的OOM。

Fresco 在低端機器上表現一樣出色，你再也不用因圖片內存占用而思前想後。

圖片加載

Fresco的Image Pipeline允許你用很多種方式來自定義圖片加載過程，比如：

• 為同一個圖片指定不同的遠程路徑，或者使用已經存在本地緩存中的圖片
• 先顯示一個低清晰度的圖片，等高清圖下載完之後再顯示高清圖
• 加載完成回調通知
• 對於本地圖，如有EXIF縮略圖，在大圖加載完成之前，可先顯示縮略圖
• 縮放或者旋轉圖片
• 對已下載的圖片再次處理
• 支持WebP解碼，即使在早先對WebP支持不完善的Android系統上也能正常使用！

圖片繪制

Fresco 的 Drawees 設計，帶來一些有用的特性：

• 自定義居中焦點
• 圓角圖，當然圓圈也行
• 下載失敗之後，點擊重現下載
• 自定義占位圖，自定義overlay, 或者進度條
• 指定用戶按壓時的overlay

圖片的漸進式呈現

漸進式的JPEG圖片格式已經流行數年了，漸進式圖片格式先呈現大致的圖片輪廓，然後隨著圖片下載的繼續，呈現逐漸清晰的圖片，這對於移動設備，尤其是慢網絡有極大的利好，可帶來更好的用戶體驗。

Android 本身的圖片庫不支持此格式，但是Fresco支持。使用時，和往常一樣，僅僅需要提供一個圖片的URI即可，剩下的事情，Fresco會處理。

動圖加載

加載Gif圖和WebP動圖在任何一個Android開發者眼裡看來都是一件非常頭疼的事情。每一幀都是一張很大的Bitmap，每一個動畫都有很多幀。Fresco讓你沒有這些煩惱，它處理好每一幀並管理好你的內存。