如何在 React Native 中動態載入映像，同時避免「需要未知模組」錯誤？

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

在React Native 中，Image 元件預先安裝了一個直覺的require 模組，讓開發人員可以輕鬆載入圖像。對於靜態圖像，存取它們就像使用 require('image!avatar') 一樣簡單。但是，當嘗試使用字串插值方法 require('image!' 'avatar') 動態載入圖片時，會出現錯誤：「需要未知模組」。

此行為是設計使然，如 React 所述Native 的靜態資源部分。透過文字檔案名稱明確要求影像可確保程式碼庫的穩定性和清晰度。嘗試使用動態字串插值會帶來歧義和潛在的挑戰。

動態影像引用的最佳實踐

儘管不鼓勵動態引用影像，但在某些情況下可能會出現這種情況有必要。為了適應這種情況，React Native 建議採用以下最佳實踐：

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

透過明確將圖示指派給包含所需影像的變量，程式碼可確保對靜態資源的引用清晰一致。

Xcode 影像資源包含

需要注意的是，靜態影像資源必須加入 Xcode 中xcassets 套件可以被 React Native 正確辨識。確保考慮到這些圖像以避免任何運行時問題。

參考文獻：

• [React Native Image Module文件](http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets)

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