如何在 React Native 中動態載入映像而不出現「需要未知模組」錯誤？

React Native 中的動態影像需求

使用 React Native 的 Image 模組時，需要考慮如何引用影像名稱在需要使用動態名稱時。

在標準場景中，在 require() 函數中使用靜態圖像名稱可以完美地工作。然而，使用動態影像名稱可能會導致複雜化。當您嘗試使用 require('image!' 'avatar') 包含具有動態圖像名稱的字串時，會出現此問題。因此，您可能會遇到令人沮喪的“需要未知模組”錯誤。

React Native 的動態影像名稱支援

不幸的是，根據 React Native 文檔，使用時存在限制動態影像名稱。在專門討論「靜態資源」的部分中，文件明確指出「引用包中圖像的唯一允許的方法是在來源中逐字寫入require('image!name-of-the-asset')。」這意味著您不能簡單地將字串與圖像名稱連接起來以使其動態化。

處理動態影像要求

要解決此限制，您需要指派動態影像名稱到一個變數。以下是實現此目的的方法：

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

或者，您可以利用React-native 套件中的asset() 輔助函數來動態地需要圖像：

import { asset } from 'react-native';

const dynamicImageSource = asset('image!' + icon);

<Image source={dynamicImageSource} />

請記住，對於這兩種方法，您仍然需要將圖像添加到Xcode 內應用程式的xcassets 包中。

遵循這些準則，您可以在 React Native 應用程式中有效地利用動態影像名稱，而不會遇到可怕的「需要未知模組」錯誤。

以上是如何在 React Native 中動態載入映像而不出現「需要未知模組」錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！