ReactNative FlatList检测滚动到列表中的最后一项

import React, { useEffect, useState } from 'react';
import { FlatList, View, Text } from 'react-native';

const MyComponent = () => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // 初始化数据
    fetchData();
  }, []);

  const fetchData = () => {
    // 模拟异步请求数据
    setIsLoading(true);
    setTimeout(() => {
      const newData = [...data, ...getMoreData()];
      setData(newData);
      setIsLoading(false);
    }, 2000);
  };

  const getMoreData = () => {
    // 模拟获取更多数据
    const newData = [];
    for (let i = 0; i < 10; i++) {
      newData.push({ id: data.length + i, text: `Item ${data.length + i}` });
    }
    return newData;
  };

  const renderListItem = ({ item }) => {
    return (
      <View style={{ padding: 16 }}>
        <Text>{item.text}</Text>
      </View>
    );
  };

  const handleEndReached = () => {
    // 检测到滚动到列表底部，加载更多数据
    if (!isLoading) {
      fetchData();
    }
  };

  return (
    <FlatList
      data={data}
      renderItem={renderListItem}
      keyExtractor={(item) => item.id.toString()}
      onEndReached={handleEndReached}
      onEndReachedThreshold={0.5}
    />
  );
};

export default MyComponent;