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

【问题标题】：How can i use infinite scroll in react native reversed flatlist我如何在反应原生反向平面列表中使用无限滚动
【发布时间】：2021-04-26 20:22:33
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-native chat infinite-scroll react-native-flatlist

【解决方案1】：

我现在使用它

// 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]) }}
        />

【讨论】：