React native 滑动到列表末尾时，不会调用FlatList`onEndReached`回调

该组件具有一个。我正在实现一个简单的功能，当用户将屏幕滑动到列表的末尾时，应用程序会发送一个新的请求，从后端向列表中获取更多项目。以下是我尝试的：

我首先创建了一个自定义组件

MyCustomList

，它只是

FlatList

的包装。有两个道具

项目

和

getMore

const MyCustomList = ({items, getMore}) => {
      ...
      return (
          <FlatList
            keyExtractor={keyExtractor}
            data={items}
            renderItem={renderItem}
            onEndReached={getMore}
            onEndReachedThreshold={0}
            ListFooterComponent={myFooter}
    />
  );
  ...
  export default MyCustomList;
}

如您所见，在我的屏幕组件中，我将

getmoreems

函数传递给

MyCustomList

当我运行我的应用程序时，当屏幕第一次显示时，我只会看到我放在

getMoreItems

中的日志消息一次。我觉得奇怪的是，当时我还没有刷到列表的末尾。之后，每次我刷到列表末尾时，都不会触发

getMoreItems

（我看不到该日志消息）。为什么呢

---

另外，当滑动到列表底部时，我的屏幕现在不会被重新呈现，因为

getMoreItems

不会被触发

setPage（第+1页）

不会被调用。

亲爱的@Leem.fin，你有没有尝试过将onedReachedThreshold值增加到大于0，比如0.1？是的，我已经尝试过了。亲爱的@Leem.fin，你有没有尝试过将onEndReachedThreshold值增加到大于0，比如0.1？是的，我尝试过。

import React, {useState} from 'react';
import MyCustomList from '../components/MyCustomList';
import {useQuery} from 'react-query';

const MyScreen = ({navigation}) => {

       const [page, setPage] = useState(1);

       // when screen is rendered, get the data from backend
       const {data, status} = useQuery('my-items', httpClient.fetchItems);

       // this is the function passed to MyCustomList component
       const getMoreItems = () => {
         // I expected to see this log every time when user swiped to the end of the list
         console.log('get next 10 items');
         setPage(page + 1);
      };

       return (
         <View>
            ...
            <MyCustomList items={data} getMore={getMoreItems} />
         </View>);
  };