React-Native之可配置化的圖片資源預加載方案

背景

在RN開發過程中，我們深受Rn包體積的擴大而困擾。爲了優化包體積，最直接的方式莫過於減少本地資源的引用（將資源上傳到雲端）。然而雖然包的體積大大減小，但伴隨而來的則是由於網絡延時導致的加載緩慢，進而引發嚴重的體驗問題，結果自然就是得不償失。那麼如何解決這樣的問題呢，就需要一套可行的資源預加載方案。下面我們將着重討論圖片資源的預加載方案。

解決方案

1、圖片預加載

React-Native官方Image組件已經提供了prefetch的方法來支持圖片預加載，其具體使用如下：

	//  1、通過調用Image.prefetch方法，拿到圖片預加載的Promise對象，這個時候還未實現圖片預加載
	let prefetchTask = Image.prefetch('www.baidu.com");
	
	// 2、通過調用prefetchTask的then方法，來實現圖片預加載
	prefetchTask.then(() => {
		// todo 圖片預加載完成後，需要做的後續操作在這裏實現
	});

2、可配置化

上面介紹了圖片的預加載方案，但是還有一個重大缺陷尚未解決，那就是可配置化的圖片預加載。在一般的項目實踐中，我們總是遇到各種各樣的圖片展示問題，如“弱網情況下，圖片出現較慢“、“有些彈窗的背景還沒出來，彈窗就展示了”等等一系列體驗問題，但是我們又不能每次都通過發佈代碼來實現圖片的預加載，這個時候就需要支持配置化的圖片預加載。

具體實現如下：

   // 圖片預加載工具類
   function preLoadImage(imgs = [], callback){
    let promises = [];
    imgs.forEach((url,idx) => {
        if(url){
            promises.push(Image.prefetch(url));
        }
    })
    Promise.all(promises).then(([...res]) => {
        callback && callback();
    });
    // 通過獲取配置來實現圖片預加載（可接入業務方各自管理的配置後臺，一般互聯網公司都會有這樣的基礎配置後臺）
    
}
 // 我這裏會寫一個prefetch.js文件，裏面是一個自執行函數，這樣可以實現隨時引用，隨時實現預加載，與業務解耦
	 (async function(){
	    // 接入配置後臺（大家可接入自己的）
	    const prefetchImgConfig = await getAppConfigByKeyV1('needPrefetchImgConfig', {});
	    // common 公共圖片
	    // 其他的是各自馬甲包圖片
	    let { common =[], zz=[], tt=[] } = prefetchImgConfig;
	    let originImgs = [];
	    if(isZX()){
	        originImgs = [...common, ...zz];
	    } else {
	        originImgs = [...common, ...tt];
	    }
	    // 去重處理
	    let allImgs = new Set([...originImgs, ...localImgs ]);
	    preLoadImage(allImgs);
	})();

基於上面的實現，既是一個完整的圖片預加載解決方案。希望對大家有用。更多精彩，請繼續關注我哦。。