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

我尝试了此操作，但得到错误提示：“在更新由以下对象管理的视图的属性“ src”时出错：RCTImageView 空值 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>
);

如何在React Native中显示图像数组？

2 个答案: