Question

在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>

很显然，这不起作用，因为我没有src的语法权利。

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

另外，根据文档，使用索引作为键是可行的，但是却被皱了皱眉，但是由于resultArray可以（在这种情况下，确实）容纳相同的数字/字符串，因此我认为使用数组项是不可能。考虑到输出只会生成1-10个Image组件，使用Math.random（）是创建键的一种方法吗？

Answer 1

我相信这一行应该是这样的：

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

同样，使用Math.random作为密钥也同样令人厌烦。请阅读https://reactjs.org/docs/reconciliation.html

Answer 2

如果图像是本地保存的， <Image source={require('./path/to/image')}。如果您需要从网址加载图片，则为： <Image source={{uri: 'https://www.url.to/image.png'}}。

因此，在您的情况下，如果图像不在项目文件夹中，则为：

<Image key={key} style={{flexDirection: "row" }} source={{uri:src}} />

Answer 3

要从foodList获取正确的src，请使用Array find()

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

Answer 4

经过一番摆弄使所有的花括号和括号正确之后，我想到了：

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

这使我在控制台/终端中获得了预期的结果：

 "./images/banana25.png"
 "./images/banana25.png"
 "./images/banana25.png"
 "./images/banana20.png"
 "./images/coconut2.5.png"
 "./images/pineapple0.5.png"
 "./images/pineapple0.5.png"

但是添加了图像标签/组件：

 {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})} />
  );

}）}

终端出现错误：

 Critical dependency: the request of a dependency is an expression

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

不确定src：src是什么意思，或者考虑到终端显示了正确的路径，为什么Image标签会引发错误。

Answer 5

好。现在可以使用了。我稍微更改了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>

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

这是基于我发现的一个并行问题的答案，即在source = {require（）}中使用变量，而不是source = {uri：

Why can't string variable be used in <Image source={}/>? (React Native)

其中显示了如何解决需求中不允许使用变量的事实。

添加： console.log（src）给了我id / src对象的索引，所以src字符串没有通过，但是图像要求通过了。

因此，不完全确定如何/为什么，但是将src设为非字符串require（“ ./ path）并对其进行引用。

React Native：使用数组遍历对象数组以创建组件

5 个答案: