【react native】Flatlist实现上拉滚动加载

在React Native中，可以使用FlatList组件实现上拉加载更多的功能。你需要监听FlatList的onEndReached事件，并在用户滚动到列表底部时触发加载更多的逻辑。以下是一个简单的实现示例：

import React, { useState, useEffect, useCallback } from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
 
const Item = ({ title }) => (
  <View style={{ height: 100, justifyContent: 'center', borderBottomWidth: 1 }}>
    <Text>{title}</Text>
  </View>
);
 
const App = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(3); // 假设有3页数据
 
  // 模拟数据加载函数
  const fetchData = useCallback(async () => {
    if (page <= totalPages && !loading) {
      setLoading(true);
      // 这里应该是API请求获取数据
      const newData = await fetchMoreData(page);
      setData([...data, ...newData]);
      setPage(page + 1);
      setLoading(false);
    }
  }, [data, loading, page, totalPages]);
 
  // 模拟数据获取
  const fetchMoreData = (page) => {
    return new Promise((resolve) => {
      // 模拟网络请求
      setTimeout(() => {
        resolve([`Item ${page}`, `Item ${page + 1}`, `Item ${page + 2}`]);
      }, 1000);
    });
  };
 
  useEffect(() => {
    fetchData(); // 组件挂载后获取数据
  }, [fetchData]);
 
  // 上拉加载
  const loadMore = () => {
    fetchData();
  };
 
  return (
    <FlatList
      data={data}
      keyExtractor={(item, index) => item}
      renderItem={({ item }) => <Item title={item} />}
      onEndReachedThreshold={0.5} // 当距离列表底部还有50%的距离时触发
      onEndReached={loadMore}
      ListFooterComponent={loading ? <ActivityIndicator /> : null} // 加载更多时显示加载指示器
    />
  );
};
 
export default App;

在这个例子中，fetchData函数负责获取数据，并通过模拟API调用更新组件的状态。loadMore函数在onEndReached事件触发时被调用，从而实现了上拉加载的功能。ListFooterComponent属性用于在加载数据时显示加载指示器。这里的totalPages用于模拟多页数据，实际应用中应该根据后端API的响应来决定是否还有更多数据。