React native 显示本地图像以“结束”；未知命名模块“；以自然反应

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

导出类ImageList扩展React.Component{
构造函数（）{
超级（）；
}
render（）{
常量数据v2=[
“/img/a1.jpg”，
“/img/a6.jpg”
];
const lapsList=datav2.map（（数据）=>{
var testPath=require（数据）；
返回(
)
})
返回(
{lapsList}
);
}
}

您可以通过直接在阵列中添加

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（）{
常量数据v2=[
要求（“./img/a1.jpg”），
要求（“./img/a6.jpg”），
];
const lapsList=datav2.map（（数据）=>{
返回(
)
})
返回(
{lapsList}
);
}

---

此外，您应该将

datav2

移动到

render（）

方法之外，以便在每个渲染上不需要图像。

您可以通过直接在数组中添加

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（）{
常量数据v2=[
要求（“./img/a1.jpg”），
要求（“./img/a6.jpg”），
];
const lapsList=datav2.map（（数据）=>{
返回(
)
})
返回(
{lapsList}
);
}

---

此外，您应该将

datav2

移到

render（）

方法之外，以便在每个渲染上不需要图像。

是的，您应该在数组中添加require，然后将datav2变量移到

render（）

之外，不要忘记将数组映射中的

索引

添加到视图返回中的

键

，这样应用程序中就不会出现警告，如下所示：

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>
   );

  }
}

const datav2=[
要求（“./img/a1.jpg”），
要求（“./img/a6.jpg”），
];
导出类ImageList扩展React.Component{
构造函数（）{
超级（）；
}
render（）{
const lapsList=datav2.map（（数据，i）=>{
返回(
)
})
返回(
{lapsList}
);
}
}

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

---

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

是的，您应该在数组中添加require，然后将datav2变量放在

render（）

之外，不要忘记将数组映射中的

索引添加为视图返回中的
键，这样应用程序中就不会出现警告，如下所示：

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>
   );

  }
}

const datav2=[
要求（“./img/a1.jpg”），
要求（“./img/a6.jpg”），
];
导出类ImageList扩展React.Component{
构造函数（）{
超级（）；
}
render（）{
const lapsList=datav2.map（（数据，i）=>{
返回(
)
})
返回(
{lapsList}
);
}
}

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


我希望这个答案能帮助您：）
索引作为键是一种反模式。索引作为键是一种反模式。