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

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

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

引言

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

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

如果我們?cè)诖a中引入了一張圖片，例如

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

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

通過(guò)以下命令構(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

打包出來(lái)的圖片資源如下

drawable-mdpi: 1x

drawable-hdpi: 1.5x

drawable-xhdpi: 2x

drawable-xxhdpi: 3x

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

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

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

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

// react-native/Libraries/Image/AssetUtils.js
// metro打包時(shí)會(huì)檢查當(dāng)前圖片存在哪些scale，將它們從小到大排序組成一個(gè)scales數(shù)組
// 比如上面的bg.png對(duì)應(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;
}

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

例如當(dāng)前手機(jī)的scale為2，如果存在2x圖片，則返回2x圖片。如果沒(méi)有2x圖，則會(huì)向上獲取3x圖。

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

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

如果是低ratio的手機(jī)，當(dāng)不存在低scale圖片時(shí)，RN也會(huì)加載到3x圖。

3.1 資源上傳

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

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

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

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

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更新時(shí)會(huì)下載對(duì)應(yīng)的zip。這里我們native側(cè)做了一個(gè)優(yōu)化，他們不是下載全量的scale.zip, 而是根據(jù)當(dāng)前手機(jī)的ratio下載對(duì)應(yīng)的scale.zip。即如果當(dāng)前手機(jī)ratio為2，則只會(huì)下載2x.zip（根據(jù)手機(jī)屏幕ratio下載，資源更小，下載速度更快，占用內(nèi)存更?。?/p>

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

如上分析，如果repo只保留3x圖，對(duì)于ratio為3的手機(jī)其實(shí)沒(méi)有影響，只影響低ratio的手機(jī)