时间戳

首页 > 解决方案 > 我如何在反应原生反向平面列表中使用无限滚动

reactjs - 我如何在反应原生反向平面列表中使用无限滚动

问题描述

我想构建聊天应用程序，因为我需要通过无限滚动加载消息，但是有一个问题。当我使用平面列表时，我无法处理更多时间，因为我必须使用倒置平面列表。我不能在 flatlist 中使用 onendReach 方法。这样做的方法是什么？

<FlatList 
   data={data.chatDetail.edges}
   keyExtractor={(item, index)=>String(index)}
   renderItem={({item})=>{
       return(<TopicMain style={styles.topicMain} data={item}/>)
   }}
   inverted={true}
   />

标签： reactjsreact-nativechatinfinite-scrollreact-native-flatlist

解决方案

我目前使用它

// get before topreach 5.th item
const thresouldVal = data.chatDetail.edges.slice(-5)
const reachIds = thresouldVal.map(val => val._id)
const handleLoadMore = useCallback((lastViewableItem) => {
    // check is top reach
    const isTopReach = reachIds.includes(lastViewableItem.item._id)
    if (isTopReach) {
        // fetchMore
    }
}, [reachIds],
)

平面列表

 <FlatList
    data={data.chatDetail.edges}
    keyExtractor={(item, index) => String(index)}
    renderItem={({ item }) => {
       return (<TopicMain style={styles.topicMain} data={item} />)}}
    inverted={true}
    onViewableItemsChanged={({ viewableItems, changed }) =>{handleLoadMore(viewableItems.slice(-1)[0]) }}
        />

推荐阅读