Question

首先，让我解释一下结构。我使用redux的useSelector来获取某个商店的状态，在这个特定的问题中，我使用了两个商店，

users = useSelector(state => state.usersKey.userMaster);
stories = useSelector(state => state.storiesKey.stories);

users存储用户数据，例如用户ID，名称，头像。而stories存储媒体文件和拥有此故事的用户的ID（请考虑instagram故事）。我正在使用Firebase实时数据库作为存储。

因此，我在这里有了这个FlatList，其中列出了“故事”组件，该组件由一个圆圈组成，该圆圈应该在其中包含用户的头像，以及下方的用户名称。单位列表从stories存储中获取其数据。在name道具中，我通过访问users存储并将存储在其中的uid与stories存储中存储的uid匹配来获取用户名。由于名称正确显示，因此可以正常工作。

<FlatList
      showsHorizontalScrollIndicator={false}
      horizontal
      data={stories}
      keyExtractor={item => item.id}
      renderItem={itemData => (
        <Stories
         name={users
            .filter(prod => prod.uid === itemData.item.id)
            .map(e => e.name)}
          avatar={users
            .filter(prod => prod.uid === itemData.item.id)
            .map(e => e.avatar)}
          onPress={() => {
            carouselHandler(itemData.item.id);
          }}
        />
      )}
    />

我认为该方法也可以与avatar道具一起使用，所以我也这样做了，但是出乎意料的是它给我一个错误，内容为 Error while updating property 'src' of a view managed by: RCTImageView null Value for uri cannot be cast from ReadableNativeArray to String，即使它能够成功成功获取文件的uri /链接也是如此。我检查了警报，它们都显示正确的链接

这是Stories组件

 <View style={styles.storiesContainer}>
  <View style={styles.storyItemContainer}>
    <TouchableOpacity onPress={props.onPress}>
      <Image style={styles.userImage} source={{ uri: props.avatar }} />
    </TouchableOpacity>
    <View style={styles.text}>
      <Text numberOfLines={1}>{props.name}</Text>
    </View>
  </View>
</View>

谢谢。

<Image>组件未显示从数据库中获取的来自uri的图像

0 个答案: