如何在 React Native 中顯示動態命名的圖像？

React Native 中的動態影像名稱：使用Image Require 模組

使用React Native 時，Image 模組可讓您顯示圖片在您的應用程式中。通常，可以使用 require('image!name-of-the-asset') 語法靜態引用圖像。

但是，在嘗試使用動態影像名稱時會出現一個常見問題。例如，如果您有一個表示圖像名稱的動態字串，例如“avatar”，則以下程式碼將不起作用：

<Image source={require('image!' + 'avatar')} />

這將導致錯誤“需要未知模組”image!avatar "" .

說明

根據React Native文檔，靜態資源必須使用前面提到的靜態語法直接引用。不支援動態載入圖片。

// Correct:
<Image source={require('image!my-icon')} />

// Incorrect:
var icon = 'my-icon-active';
<Image source={require('image!' + icon)} />

替代方案

如果需要使用動態圖片名稱，可以將圖片資源儲存在單獨的陣列中或對象，然後使用 Image 元件的 source屬性引用它們：

const images = {
  avatar: require('image!avatar'),
  logo: require('image!logo'),
};

<Image source={images[dynamicImageName]} />

其他注意

對於 iOS，您必須記住將圖像包含在 Xcode 專案內的資產目錄中。這對於在 React Native 應用程式中正確引用圖像是必要的。

以上是如何在 React Native 中顯示動態命名的圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！