在react native中使用flashlist的图像问题

djmepvbi 于 2023-05-18 发布在 React

关注(0)|答案(1)|浏览(126)

我有这样的烦恼：

图片越多，干扰就越多，持续的时间也越长
flashlist是否有显示此类情况下加载指示符的方法？如果没有，如何修复？当我使用简单的平面列表时，我没有任何问题与以下P.s：我找到了onLoad事件，但它不工作：

<FlashList
        numColumns={2}
        onEndReached={async() => {
          getData()
        }}
        data={DATA}
        renderItem={renderItem}
        estimatedItemSize={200}
        onLoad={()=>{
          setIsLoading(false)
        }}
    />

react-native

来源：https://stackoverflow.com/questions/76113137/troubles-with-images-using-flashlist-in-react-native

1条答案

按热度按时间

xxslljrj1#

您可以使用react-native-fast-image库快速加载图像，并在renderItem组件中显示列表中的每个图像的指示符。

<FastImage
    style={[
      styles.image,
      {
        width: StyleConfig.smartWidthScale(250),
        height: StyleConfig.smartWidthScale(165),
        backgroundColor: isLoading ? Color.blackOpacity : Color.transparent,
      },
    ]}
    source={{uri:item.image}}
    onLoadStart={() => {
      setLoading(true);
    }}
    onLoadEnd={() => {
      setLoading(false);
    }}
    onError={() => {
      setLoading(false);
    }}>
    {loading && <ActivityIndicator size={'small'} animating={isLoading} />}

  </FastImage>

赞(0）回复(0）举报 2023-05-18

我来回答

在react native中使用flashlist的图像问题

1条答案

相关问题

热门标签

最新问答