显示本地图像以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> 
    ); 

    } 
} 

这就是结果例如，当我尝试在我的模拟器：

我希望这个回答能帮助到您：