在React本机中以“未知命名模块”结尾显示本地图像

Question

我尝试动态显示本地图像列表，这些图像存储在. .img/文件夹中。用我的实现抛出错误“未知命名模块：，./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>
   );

  }
}

当我在模拟器上试用它时，这就是结果示例：

​

​

我希望这个答案能帮助你:)