首页 文章

显示本 Map 像以React Native中的“未知命名模块”结尾

提问于
浏览 次
0

我尝试动态显示本 Map 像列表，这些图像存储在.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>
    );
  }
}
react-native react-native-android

2 回答

  • 2

    您可以通过在数组中直接添加 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>
  );
}

    此外，您应该在 render() 方法之外移动 datav2 ，以便在每个渲染上不需要图像 .

    回复于
  • 1

    是的，您应该在数组中添加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>
   );

  }
}

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

    enter image description here

    我希望这个答案可以帮到你:)

    回复于

相关问题