如何在本机反应中显示一组图像？

Question

如何在 react native 中显示图像数组？图像使用 URL 并存储在 firestore 数据库中这是它存储在数据库中的确切结构 lodash 用于将用户对象更改为数组 [![数据库结构][1]][1]

Object {
"book": "Robin hood", 
"photos": Array [ "https://picsum.photos/id/1001/5616/3744", "https://picsum.photos/id/1002/4312/2868", "https://picsum.photos/id/1003/1181/1772", ],
 }

我尝试了这个，但得到错误提示“更新由 RCTImageView 管理的视图的属性“src”时出错 空值 uri 的值不能从 ReadableVativeArray 转换为 String''

return this.props.user.map((details) => {
      return (

        <View >

        <Text>{details.book}</Text>

          <Image style={{ width: 350, height: 300 }} source={{ uri: details.photos }} />

        </View>

        );

    });

我也试过了，控制台日志显示了图像 URL 和其他获取的数据，并且显示了图书详细信息，但由于某种原因，图像没有显示在屏幕上

 return (
      <View style={{ flex: 1 }}>

        {this.props.user.map(details => {
          details.photos.map((image) => {
            console.log(image)
            return (
              <View>
                <Image style={{ width: 350, height: 300 }} source={{ uri: image }} />
              </View>
            );
          })
          return (
            <View>
                  <Text style={styles.b}>{details.book}</Text>
            </View>
          )
        })}
      </View>
    )


  [1]: https://i.stack.imgur.com/dLvci.png

Answer 1

第二个示例中details.photos.map 的结果未包含在返回值中。相反，你想要这样的东西：

 return (
      <View style={{ flex: 1 }}>

        {this.props.user.map(details => {
          // save the result of the map call to a variable
          const photos = details.photos.map((image) => {
            console.log(image)
            return (
              <View key={image}>
                <Image style={{ width: 350, height: 300 }} source={{ uri: image }} />
              </View>
            );
          })
          return (
            <View>
                  // note the addition of the photos here
                  {photos}
                  <Text style={styles.b}>{details.book}</Text>
            </View>
          )
        })}
      </View>
    )

Answer 2

假设“对象”指的是“this.props.user” 所以，你尝试迭代一个对象但你不能，你只能迭代一个数组，比如 photos 数组。

试试这个：

return (
  <View style={{ flex: 1 }}>

    <Text>{this.props.user.book}</Text>

    {this.props.user.photos.map((photo) => {
      return (
        <Image style={{ width: 350, height: 300 }} source={{ uri: photo }} />
      );
    })}

  </View>
);