顯示本地圖像以React Native中的「未知命名模塊」結尾

Question

我嘗試動態顯示本地圖像的列表，這些圖像存儲在文件夾.img /中。 React Native會在我的實現中拋出錯誤「Unknown named module：，./img/a1.jpg」。我讀到了動態需要圖像的問題，但無法解決問題。你有什麼建議嗎？

export class ImageList extends React.Component { 
    constructor() { 
    super(); 
    } 
    render() { 
    const datav2 = [ 
     "./img/a1.jpg", 
     "./img/a6.jpg" 
    ]; 
    const lapsList = datav2.map((data) => { 
     var testPath = require(data); 
     return (
     <View> 
      <Image source={testPath} style={{width: 50, height: 50, backgroundColor: "#33ff00"}} /> 
     </View> 
    ) 
    }) 
    return (
     <View> 
     {lapsList} 
     </View> 
    ); 
    } 
} 

Answer 1

您可以直接在陣列中添加require來消除動態加載。

render() { 
    const datav2 = [ 
    require("./img/a1.jpg"), 
    require("./img/a6.jpg"), 
    ]; 
    const lapsList = datav2.map((data) => { 
    return (
     <View> 
     <Image source={data} style={{width: 50, height: 50, backgroundColor: "#33ff00"}} /> 
     </View> 
    ) 
    }) 
    return (
    <View> 
     {lapsList} 
    </View> 
); 
} 

此外，你應該將datav2的render()方法外不要求每個渲染圖像。

Answer 2

是的，你應該添加需要在數組中，然後把datav2變量外render()，不要忘記添加index在陣圖是在視圖return key所以在您的應用程序沒有任何警告，就像這樣的：

const datav2 = [ 
    require("./img/a1.jpg"), 
    require("./img/a6.jpg"), 
]; 

export class ImageList extends React.Component { 
constructor() { 
    super(); 
} 

render() { 

    const lapsList = datav2.map((data,i) => { 
    return (
     <View key={i}> 
      <Image source={testPath} style={{width: 50, height: 50, backgroundColor: "#33ff00"}} /> 
     </View> 
    ) 
    }) 

    return (
    <View> 
     {lapsList} 
    </View> 
    ); 

    } 
} 

這就是結果例如，當我嘗試在我的模擬器：

我希望這個回答能幫助到您：