Loops React native：使用数组循环对象数组以创建组件

在React Native中（我是React新手），我有一个javascript函数，它返回一个名为myResult的变量中的数组。打印在终端上，显示：

 Array [
 25,
 25,
 20,
 10,
 5,
 5,
]

我将其添加到状态中

    this.setState({resultArray: myResult});

然后，在状态下，我有一个如下的数组：

   this.state = {
      foodList: [
    {id: "25", 
    src: `"./images/banana25.png"`
  },
    {id: "20",
    src: `"./images/banana20.png"`
  },
    {id: "15",
    src: `"./images/apple15.png"`
  },
    {id: "10",
    src: `"./images/mango10.png"`
  },
    {id: "5",
    src: `"./images/steakNeggs5.png"`
  },
   }

我想使用resultArray在视图中为每个项目显示一个图像，该图像对应于与每个数组项目匹配的id

  <View style={{height: 318, flexDirection: "row" }}>

   {this.state. resultArray.map((item, key) => {
      let src = this.state.foodList.item.src
     return (
      <Image key={key} style={{flexDirection: "row" }} source={require({src})} />
     );
  })}

 </View>

{this.state.resultArray.map（（项，键）=>{
设src=this.state.foodList.item.src
返回(
);
})}

显然，这不起作用，因为我没有src的正确语法

有人能告诉我从foodList数组获取src的正确语法吗

---

此外，根据文档，使用索引作为键是可行的，但不受欢迎，但由于resultArray可以（在本例中是）保存相同的数字/字符串，我认为使用数组项是不可能的。使用Math.random（）可以创建一个键吗？考虑到输出只会生成1-10个图像组件？

我认为应该是这样的：

<View style={{height: 318, flexDirection: "row" }}>

   {this.state.resultArray.map((item, key) => {
      let src = this.state.foodList.find(food => +food.id === item).src;
     return <Image key={key} style={{flexDirection: "row" }} source={uri: src)} />;
  })}

 </View>

{this.state.resultaray.map（（项，键）=>{
让src=this.state.foodList.find（food=>+food.id==item.src；
回来
})}

---

同样，使用Math.random作为键也同样不受欢迎。请阅读

如果图像是本地保存的，则它是

---

要从
foodList
获取正确的src，请使用

this.state.resultArray.map（（id，index）=>{
const{src}=this.state.foodList.find（item=>item.id==id）；
返回(
);
});
在对所有括号和括号进行了一些修改之后，我想到了：

    <View style={{height: 318, flexDirection: "row" }}>
      {this.state.resultArray.map((item, key) => {
      let src = this.state.foodList.find(food => +food.id === item).src;

       console.log(src);

      })}
     </View>

但添加了图像标记/组件后：

 {this.state.resultArray.map((item, key) => {
  let src = this.state.foodList.find(food => +food.id === item).src;
  return(
  <Image key={key} style={{flexDirection: "row" }} source={require({src})} />
  );

在使用Expo应用程序的iPhone中，我得到：


不确定src:src是什么意思，或者考虑到终端显示的是正确的路径，不确定图像标记抛出错误的原因。
确定。它现在起作用了。我稍微更改了foodList数组，以便将项目列为：

 {id: "25", 
    src: require("./images/banana25.png"),
  },
    {id: "20",
    src: require("./images/banana20.png"),
  }, 
  etc, etc.

然后我将组件更改为：

 <View style={{height: 318, flexDirection: "row" }}>
    {this.state.resultArray.map((item, key) => {
    let src = this.state.foodList.find(food => +food.id === item).src;
    return <Image key={key} style={{flexDirection: "row" }} source={src} />;
   })}

  </View>


{this.state.resultaray.map（（项，键）=>{
让src=this.state.foodList.find（food=>+food.id==item.src；
回来
})}

注意，它是“source={src}”，而不是“source={{src}”

这是基于我在source={require（）}中使用变量而不是source={uri:


这里展示了如何绕过require中不允许使用变量这一事实

加入：
console.log（src）
给我id/src对象的索引，所以不知何故src字符串没有通过，但映像需要通过

因此，不确定如何/为什么，但将src转换为非字符串需要（“./path）引用它是有效的。
抱歉。忘记指定它们是本地文件，所以需要require，而不是uri。它保存在项目文件夹中还是设备中？如果从其他地方下载，即使是本地文件，也需要指定图像uri。请注意，在安卓系统中，您需要使用file://path/to/image.jpg“在ios i上时t的“path/to/image”我在Mac电脑上编写代码，并在物理iPhone上进行测试。它的工作原理是：+做什么？它将字符串强制转换为数字。
 Critical dependency: the request of a dependency is an expression

 {id: "25", 
    src: require("./images/banana25.png"),
  },
    {id: "20",
    src: require("./images/banana20.png"),
  }, 
  etc, etc.

 <View style={{height: 318, flexDirection: "row" }}>
    {this.state.resultArray.map((item, key) => {
    let src = this.state.foodList.find(food => +food.id === item).src;
    return <Image key={key} style={{flexDirection: "row" }} source={src} />;
   })}

  </View>