如何在 React Native 的 Image Require 模組中動態載入圖片？

React Native Image Require 模組中的動態圖像名稱

在React Native 中，Image Require 模組允許開發者將靜態映像資源載入到他們的應用程式。應用程式.雖然此模組可以完美地處理靜態影像檔案名，但動態影像名稱通常會導致錯誤。

問題：

開發人員嘗試使用動態字串作為圖像檔案名稱:

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

但是，React Native 會拋出錯誤，指示未知模組，如圖所示如下：

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager.

解決方案：

根據React Native文件的「靜態資源」部分，圖像名稱必須在source屬性中靜態指定：

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

明確使用動態字串作為圖像檔案名稱不鼓勵：

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

相反，解決方案是利用條件渲染將靜態圖像檔案名稱分配給變數：

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

其他注意事項：

• 靜態影像資源必須加入Xcode 中的xcassets 套件中應用程式。
• 有關向React Native 應用程式添加靜態資源的更多信息，請訪問http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to- your -app-using-images-xcassets。

以上是如何在 React Native 的 Image Require 模組中動態載入圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！