【React Native】文件翻譯閱讀紀錄 - 指南 - 圖片

by - 上午9:00

Facebook Open Source React Native


圖片

靜態圖像資源


React Native提供了一種統一的方式來管理iOS和Android應用中的圖像和其他媒體資產。要將靜態圖像添加到應用程序，請將其放在源代碼樹中的某個位置，並像這樣引用它：
<Image source={require('./my-icon.png')} />
T圖像名稱的解析方式與解析JS模塊的方式相同。在上面的示例中，打包器將在與需要它的組件相同的文件夾中查找 my-icon.png。此外，如果您有 my-icon.ios.png 和 my-icon.android.png，則打包程序將為平台選擇正確的文件。

 您還可以使用 @2x 和 @3x 後綴為不同的屏幕密度提供圖像。如果您具有以下文件結構：
.
├── button.js
└── img
    ├── check@2x.png
    └── check@3x.png
...和  button.js  代碼包含：
<Image source={require('./img/check.png')} />
..打包器將捆綁並提供與設備屏幕密度相對應的圖像。例如，check @ 2x.png將用於iPhone 7，而oncheck @ 3x.png將用於iPhone 7 Plus或Nexus 5.如果沒有與屏幕密度匹配的圖像，最接近的最佳選項將被選中。
在Windows上，如果向項目添加新圖像，則可能需要重新啟動打包程序。

 以下是您獲得的一些好處：
  1. iOS和Android上的系統相同。
  2. 圖像與JavaScript代碼位於同一文件夾中。組件是獨立的。
  3. 沒有全局命名空間，即您不必擔心名稱衝突。
  4. 只有實際使用的圖像才會打包到您的應用中。
  5. 添加和更改圖像不需要重新編譯應用程序，只需像平常一樣刷新模擬器。
  6. 打包器知道圖像尺寸，無需在代碼中復制它。
  7. 圖像可以通過npm包分發。
為了使其工作，必須靜態地知道require中的圖像名稱。
// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;
請注意，這種方式所需的圖像源包括圖像的大小（寬度，高度）信息。如果需要動態縮放圖像（即通過flex），可能需要在style屬性上手動設置{width：undefined，height：undefined}。

靜態非圖像資源

上述require語法也可用於在項目中靜態包含音頻，視頻或文檔文件。支持最常見的文件類型，包括.mp3，.wav，.mp4，.mov，.html和.pdf。有關完整列表，請參閱packager默認值。

 您可以通過創建打包程序配置文件來添加對其他類型的支持（有關配置選項的完整列表，請參閱打包程序配置文件）。

 需要注意的是，視頻必須使用絕對定位而不是flexGrow，因為非圖像資源當前不會傳遞大小信息。對於直接鏈接到Xcode或Android的Assets文件夾的視頻，不會出現此限制。

混合應用程序資源中的圖像

如果您正在構建混合應用程序（React Native中的某些UI，平台代碼中的某些UI），您仍然可以使用已捆綁到應用程序中的圖像。

 對於通過Xcode資產目錄或Android drawable文件夾中包含的圖像，請使用不帶擴展名的圖像名稱：
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
對於Android資源文件夾中的圖像，請使用 asset：/ scheme：
<Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} />
這些方法不提供安全檢查。由您來保證這些圖像在應用程序中可用。您還必須手動指定圖像尺寸。

網絡圖像

您將在應用程序中顯示的許多圖像在編譯時將無法使用，或者您需要動態加載一些圖像以保持二進製文件大小不變。與靜態資源不同，您需要手動指定圖像的尺寸。強烈建議您使用 https 以滿足 iOS 上的 App Transport Security 要求。
// GOOD
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 400, height: 400}} />

// BAD
<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} />

圖像的網絡請求

如果您想設置HTTP-Verb，Headers或Body以及圖像請求等內容，可以通過在源對像上定義這些屬性來實現：
<Image
  source={{
    uri: 'https://facebook.github.io/react/logo-og.png',
    method: 'POST',
    headers: {
      Pragma: 'no-cache',
    },
    body: 'Your Body goes here',
  }}
  style={{width: 400, height: 400}}
/>

網址數據圖像

有時，您可能從REST API調用獲取編碼圖像數據。您可以使用'data：'uri方案來使用這些圖像。與網絡資源相同，您需要手動指定圖像的尺寸。

建議僅用於非常小且動態的圖像，例如DB列表中的圖標。
// include at least width and height!
<Image
  style={{
    width: 51,
    height: 51,
    resizeMode: Image.resizeMode.contain,
  }}
  source={{
    uri:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
  }}
/>

緩存控制（僅限iOS）

在某些情況下，如果圖像已經在本地緩存中，您可能只想顯示圖像，即低分辨率佔位符，直到可用的分辨率更高。在其他情況下，您不關心圖像是否過時並且是否願意顯示過時的圖像以節省帶寬。緩存源屬性使您可以控製網絡層與緩存的交互方式。
  • default：使用本機平台默認策略。
  • reload：URL的數據將從原始源加載。不應使用現有的緩存數據來滿足URL加載請求。
  • force-cache：現有的緩存數據將用於滿足請求，無論其年齡或到期日期如何。如果對應於請求的高速緩存中沒有現有數據，則從始發源加載數據。
  • only-if-cached：現有的緩存數據將用於滿足請求，無論其年齡或到期日期如何。如果緩存中沒有與URL加載請求相對應的現有數據，則不會嘗試從原始源加載數據，並且認為加載失敗。
<Image
  source={{
    uri: 'https://facebook.github.io/react/logo-og.png',
    cache: 'only-if-cached',
  }}
  style={{width: 400, height: 400}}
/>

本地文件系統映像

有關使用 Images.xcassets 之外的本地資源的示例，請參閱 CameraRoll。

最佳相機膠卷圖片

iOS為相機膠卷中的同一圖像保存了多種尺寸，因性能原因選擇盡可能接近的圖像非常重要。在顯示200x200縮略圖時，您不希望將全質量3264x2448圖像用作源。如果存在完全匹配，React Native將選擇它，否則它將使用至少大50％的第一個，以避免在從近似大小調整大小時出現模糊。所有這些都是默認完成的，因此您不必擔心編寫繁瑣（且容易出錯）的代碼來自己完成。

為什麼不自動調整大小？

在瀏覽器中，如果您沒有為圖像指定大小，瀏覽器將呈現0x0元素，下載圖像，然後基於正確的大小呈現圖像。這種行為的一個大問題是，隨著圖像加載，您的UI將會四處跳轉，這會帶來非常糟糕的用戶體驗。

 在React Native中，故意不實現此行為。開發人員需要提前了解遠程圖像的尺寸（或寬高比），但我們相信這會帶來更好的用戶體驗。通過require（'./ my-icon.png'）語法從應用程序包加載的靜態圖像可以自動調整大小，因為它們的尺寸在安裝時立即可用。

 例如，require（'./ my-icon.png'）的結果可能是：
{"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573}

來源作為對象

在React Native中，一個有趣的決定是src屬性被命名為source並且不接受字符串而是具有uri屬性的對象。
<Image source={{uri: 'something.jpg'}} />
在基礎架構方面，原因是它允許我們將元數據附加到此對象。例如，如果您使用require（'./ my-icon.png'），那麼我們會添加有關其實際位置和大小的信息（不要依賴於這個事實，它可能在將來發生變化！）。這也是未來的證明，例如我們可能希望在某些時候支持sprite，而不是輸出{uri：...}，我們可以輸出{uri：...，crop：{left：10，top：50， width：20，height：40}}並透明地支持所有現有呼叫站點上的spriting。

 在用戶方面，這允許您使用有用的屬性（如圖像的尺寸）註釋對象，以便計算將要顯示的大小。可以將其用作數據結構以存儲有關圖像的更多信息。

通過嵌套的背景圖像

熟悉Web的開發人員的常見功能請求是背景圖像。要處理此用例，您可以使用<ImageBackground>組件，該組件與<Image>具有相同的道具，並添加要在其上層疊的子項。

 在某些情況下，您可能不想使用<ImageBackground>，因為實現非常簡單。有關更多信息，請參閱<ImageBackground>的源代碼，並在需要時創建自己的自定義組件。
return (
  <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
    <Text>Inside</Text>
  </ImageBackground>
);
請注意，您必須指定一些寬度和高度樣式屬性。

iOS 邊框半徑樣式

請注意，iOS的圖像組件當前忽略以下特定於角落的邊框半徑樣式屬性：
  • borderTopLeftRadius
  • borderTopRightRadius
  • borderBottomLeftRadius
  • borderBottomRightRadius

Off-thread 解碼

圖像解碼可能需要超過一幀的時間。這是Web上幀丟失的主要來源之一，因為解碼是在主線程中完成的。在React Native中，圖像解碼在不同的線程中完成。實際上，您還需要在尚未下載圖像時處理這種情況，因此在解碼時顯示佔位符幾個幀不需要任何代碼更改。




Share
Tweet
Pin
Share
Tags : , , , , , , , , , , , , , ,

You May Also Like

0 意見