react-native只保留3x圖原理解析

更新時間：2023年01月13日 11:20:57 作者：lcwlucky

這篇文章主要為大家介紹了react-native只保留3x圖原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

我們的react-native項目中，一張圖片一般會存在1x, 1.5x, 2x, 3x幾種尺寸（1.5x是android特有的），以便在不同屏幕尺寸的手機加載對應(yīng)尺寸的圖片。

1. 輸出構(gòu)建產(chǎn)物

如果我們在代碼中引入了一張圖片，例如

// index.js
import bg from './bg.png';

.
├── index.js
├── bg.png
├── bg@1.5x.png
├── bg@2x.png
└── bg@3x.png

通過以下命令構(gòu)建bundle

ios

react-native bundle --entry-file ./index.ts --platform ios --bundle-output ios.js --assets-dest ./ios

android

react-native bundle --entry-file ./index.ts --platform android --bundle-output android.js --assets-dest ./android

打包出來的圖片資源如下

drawable-mdpi: 1x

drawable-hdpi: 1.5x

drawable-xhdpi: 2x

drawable-xxhdpi: 3x

可以看到，ios會將圖片都放入同一個文件夾，通過scale后綴區(qū)分。而android則將不同的scale文件分別放入對應(yīng)的scale文件夾，文件名都是一樣的。

如果當前圖片只存在3x圖，打包出來的文件夾結(jié)構(gòu)如下

2. RN如何決定加載哪張scale圖片？

那么RN是如何決定加載哪張scale圖片呢？

// react-native/Libraries/Image/AssetUtils.js
// metro打包時會檢查當前圖片存在哪些scale，將它們從小到大排序組成一個scales數(shù)組
// 比如上面的bg.png對應(yīng)的scales為[1, 1.5, 2, 3]
export function pickScale(scales: Array<number>, deviceScale?: number): number {
  if (deviceScale == null) {
    deviceScale = PixelRatio.get();
  }
  // Packager guarantees that `scales` array is sorted
  for (let i = 0; i < scales.length; i++) {
    if (scales[i] >= deviceScale) {
      return scales[i];
    }
  }
  // If nothing matches, device scale is larger than any available
  // scales, so we return the biggest one. Unless the array is empty,
  // in which case we default to 1
  return scales[scales.length - 1] || 1;
}

通過源碼得知，RN根據(jù)當前手機的ratio加載對應(yīng)的scale圖片。如果當前手機的ratio沒有匹配到正確的scale圖片，則會獲取第一個大于當前手機ratio的scale圖片。

例如當前手機的scale為2，如果存在2x圖片，則返回2x圖片。如果沒有2x圖，則會向上獲取3x圖。

3. repo中是否可以只保留3x圖？

既然如此，那么我們能否在repo中僅僅保留3x圖呢？這樣打包出來的assets資源就可以變小了。

如果是低ratio的手機，當不存在低scale圖片時，RN也會加載到3x圖。

3.1 資源上傳

在我們項目打包構(gòu)建bundle和生成對應(yīng)的assets資源后，需要將它們都上傳cdn。

在上傳之前，會先將bundle和不同的scale圖片分別壓縮到對應(yīng)zip中

android 直接將不同的drawable文件夾壓縮，比如 drawable-xxhdpi > hash.1.5x.zip

ios會從assets目錄中找出所有同樣的scale圖片進行壓縮。比如

a@3x.png, b@3x.png > hash.3x.zip

然后將1x.zip, 1.5x.zip, 2x.zip, 3x.zip都上傳cdn。

3.2 資源下載

native側(cè)發(fā)現(xiàn)有新的RN更新時會下載對應(yīng)的zip。這里我們native側(cè)做了一個優(yōu)化，他們不是下載全量的scale.zip, 而是根據(jù)當前手機的ratio下載對應(yīng)的scale.zip。即如果當前手機ratio為2，則只會下載2x.zip（根據(jù)手機屏幕ratio下載，資源更小，下載速度更快，占用內(nèi)存更小）。

所以假如我們在repo中只保留3x圖，那么打包后上傳cdn時，只有3x.zip存在圖片資源，其他scale zip是空的。那么假如用戶當前手機的ratio為2, 那么只會下載2x.zip, 而RN此時加載一張圖片時，發(fā)現(xiàn)找不到對應(yīng)的2x圖，就會嘗試加載3x圖，然而native并沒有下載3x圖，導(dǎo)致在ratio為2的手機中加載圖片失敗。

如上分析，如果repo只保留3x圖，對于ratio為3的手機其實沒有影響，只影響低ratio的手機