显示本地图像以＆＃34;未知命名模块＆＃34;在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

是的，您应该在数组中添加require，然后将datav2变量放在render()之外，不要忘记将数组映射中的index添加到视图中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>
   );

  }
}

这是我在模拟器上尝试时的结果示例：

我希望这个答案可以帮助你：）