react native 封装一个公用的数据请带上拉分页下拉刷新的组件

当你需要在React Native中封装一个带有上拉分页和下拉刷新功能的公用数据组件时，你可以使用FlatList组件和相关的状态管理来实现。

下面是一个示例代码，演示了如何封装这样一个组件：

import React, { useState, useEffect } from 'react';
import { View, FlatList, ActivityIndicator, RefreshControl } from 'react-native';
import axios from 'axios';

const PaginationRefreshComponent = ({ apiEndpoint }) => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [refreshing, setRefreshing] = useState(false);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await axios.get(`${apiEndpoint}?page=${page}`);
      const newData = response.data;
      if (page === 1) {
        setData(newData);
      } else {
        setData(prevData => [...prevData, ...newData]);
      }
      setLoading(false);
      setRefreshing(false);
    } catch (error) {
      console.error(error);
    }
  };

  const handleLoadMore = () => {
    if (!loading) {
      setPage(prevPage => prevPage + 1);
    }
  };

  const handleRefresh = () => {
    if (!refreshing) {
      setPage(1);
      setRefreshing(true);
    }
  };

  const renderFooter = () => {
    return (
      <View style={{ paddingVertical: 20 }}>
        {loading ? (
          <ActivityIndicator size="large" color="#0000ff" />
        ) : null}
      </View>
    );
  };

  return (
    <View>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <View>
            {/* 在这里渲染数据项 */}
          </View>
        )}
        keyExtractor={(item, index) => index.toString()}
        ListFooterComponent={renderFooter}
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0.1}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={handleRefresh}
          />
        }
      />
    </View>
  );
};

export default PaginationRefreshComponent;

在上面的例子中，我们创建了一个名为PaginationRefreshComponent的组件，它接受一个apiEndpoint prop，用于指定数据的API端点。

组件内部使用了useState来管理数据、页面、加载状态和刷新状态。在useEffect钩子中，我们初始化数据，然后在fetchData函数中发起网络请求获取数据，并根据当前页面数来更新数据状态。

handleLoadMore函数用于处理上拉加载更多数据的逻辑，它会将页面数加一。

handleRefresh函数用于处理下拉刷新的逻辑，它会将页面数重置为1，并设置刷新状态为true。

renderFooter函数用于渲染加载更多数据时显示的加载指示器。

最后，我们使用FlatList组件来展示数据列表，其中包括渲染数据项的逻辑、设置keyExtractor、设置加载更多功能和下拉刷新功能等。我们使用RefreshControl组件作为FlatList的refreshControl属性，来实现下拉刷新功能。

通过使用这个封装的分页和下拉刷新组件，你可以在你的应用中使用它，并传递适当的apiEndpoint来获取数据。

当你在React Native中使用上述封装的分页和下拉刷新组件时，你可以将其作为一个普通的组件导入并在你的应用中使用它。以下是一个示例，展示了如何在应用中使用该组件：

import React from 'react';
import { View, Text } from 'react-native';
import PaginationRefreshComponent from './PaginationRefreshComponent';

const App = () => {
  const apiEndpoint = 'https://api.example.com/data';

  return (
    <View>
      <Text>My App</Text>
      <PaginationRefreshComponent apiEndpoint={apiEndpoint} />
    </View>
  );
};

export default App;

在上面的示例中，我们将PaginationRefreshComponent导入到App组件中，并将apiEndpoint传递给它作为prop。你可以根据你的实际需求来设置apiEndpoint，它应该是一个可以返回分页数据的API端点。

这样，当你运行应用时，PaginationRefreshComponent将会渲染一个带有上拉分页和下拉刷新功能的数据列表，它会自动加载更多数据和处理下拉刷新操作。你可以根据需要自定义渲染数据项的逻辑。

请注意，在实际应用中，你可能需要对网络请求进行错误处理、添加筛选或搜索功能、优化性能等。上述示例只是一个基本的演示，你可以根据自己的需求进行扩展和定制。

希望这对你有帮助！如果有任何进一步的问题，请随时提问。

#头条文章养成计划#