首页 > 其他分享 >react native FlatList 下拉加载更多分页数据

react native FlatList 下拉加载更多分页数据

时间:2023-11-29 11:12:43浏览次数:33  
标签:const FlatList setLoading react useState native 加载

一. 官方文档
flatlist文档
onendreached方法
二、相关代码

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

const MyFlatListWithLoadMore = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);

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

  const fetchData = async () => {
    // 模拟异步加载数据
    setLoading(true);

    try {
      // 发送网络请求或其他数据获取操作
      const response = await fetch(`https://api.example.com/data?page=${page}`);
      const newData = await response.json();

      // 更新数据
      setData(prevData => [...prevData, ...newData]);
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setLoading(false);
    }
  };

  const renderItem = ({ item }) => (
    <View style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
      <Text>{item.name}</Text>
    </View>
  );

  const renderFooter = () => {
    // 显示加载更多指示器
    return loading ? <ActivityIndicator size="large" color="#0000ff" /> : null;
  };

  const handleEndReached = () => {
    // 当滚动到底部时触发加载更多
    if (!loading) {
      setPage(prevPage => prevPage + 1);
      fetchData();
    }
  };

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.key}
      ListFooterComponent={renderFooter}
      onEndReached={handleEndReached}
      onEndReachedThreshold={0.1} // 触发加载更多的阈值
    />
  );
};

export default MyFlatListWithLoadMore;

标签:const,FlatList,setLoading,react,useState,native,加载
From: https://www.cnblogs.com/lpkshuai/p/17864132.html

相关文章

  • 使用React+SpringBoot开发一个协同编辑的表格文档
    本文由葡萄城技术团队发布。转载请注明出处:[葡萄城官网],葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言随着云计算和团队协作的兴起,协同编辑成为了许多企业和组织中必不可少的需求。通过协同编辑,多个用户可以同时对同一个文档进行编辑和更新,从而提高工作效......
  • 使用React+SpringBoot开发一个协同编辑的表格文档
    本文由葡萄城技术团队发布。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言随着云计算和团队协作的兴起,协同编辑成为了许多企业和组织中必不可少的需求。通过协同编辑,多个用户可以同时对同一个文档进行编辑和更新,从而提高工作效......
  • React学习三:Redux和ReactRouter
    Reduxredux是一个仓库,用来存储数据。当react中多个组件需要用到同一个数据时,如果我们一次次地请求会比较麻烦,也会加大服务器的压力。这种多组件用到的数据就可以存放到redux仓库中。redux仓库使用原生的依赖创建比较繁琐,为了更快创建使用"@reduxjs/toolkit"这个依赖包。创建好的......
  • 2023-11-27 记录react拖拽组件——react-draggable试用方法
    安装:yarnaddreact-draggable注:如果你用npm安装失败可以尝试使用yarm,我就是npmi react-draggable报错了,用yarn装才好普通使用://引入importDraggablefrom'react-draggable';constDraggableCore:any=Draggable;//使用<div><DraggableCore><div>666&l......
  • React 组件之属性
    如果你想要实现自己的梦想,就必须先拥有勇气去追求它。1.ReactProps属性props主要解决两个问题:复用性问题以及可以让组件之间通信。属性props正常是外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改(属性是描述性质、特点的,组件自己不能随意更......
  • 高级前端开发工程师必备:Hooks、React Router v6 和状态管理
    点击下方“前端开发博客”,关注并“设为星标”大家好,我是漫步最近一个大佬的简历这样子写的,“可以熟练利用react全家桶进行开发。对ahooks部分源码阅读,加深对hooks的基本使用及其内部的实现原理有了深层次的理解;阅读过react-rouerv6的源码,进行过技术分享;对技术选型(redux、......
  • 前端项目实战壹佰陆拾react-admin+material ui-react-admin之usePermissions
    我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端技术群import*asReactfrom"react";importCardfrom'@mui/material/Card';importCardContentfrom'@mui/material/CardContent';import{usePermissions}from'react-admin';con......
  • 前端项目实战壹佰陆拾贰react-admin+material ui-react-admin之usePermissions之刷新
    我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端技术群constGrantAdminPermissionsButton=()=>{constrecord=useRecordContext();const[update]=useUpdate();const{refetch}=usePermissions();consthandleCli......
  • 前端项目实战壹佰肆拾react-admin+material ui-react-admin之useListContext声明式版
    我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端技术群import{WithListContext}from'react-admin';import{Typography}from'@mui/material';exportconstAside=()=>(<WithListContextrender={({data,isLoading})=>......
  • 前端项目实战壹佰肆拾叁react-admin+material ui-react-admin之useList之filter
    我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端技术群const{data,total}=useList({data:[{id:1,name:'Arnold'},{id:2,name:'Sylvester'},{id:3,name:'Jean-Claude'},],filter:{n......