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

debugcn 发表于 Dev

普罗斯

如何在 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", ],
 }

我试过了，但得到错误提示“更新视图的属性 'src' 时出错：RCTImageView null uri 的值不能从 ReadableVativeArray 转换为字符串”

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

蓝色的

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