您的当前位置:首页正文

react native基于FlatList下拉刷新上拉加载实现代码示例

2023-12-07 来源:站点网
导读我们日常开发的时候,经常会遇到上拉加载更多的需求,原因很简单,数据量大的时候分批次加载可提高加载效率,为用户省点流量和时间。 这次我就给大家分享一下我写得 ScrollView (大佬勿喷),本人是在前端道路上越走越远得小菜鸡 言归正传 首先第一步,引入我们得ScrollView 引入完之后我们开始下面得操作 </ScrollView> 下面我们讲一下触底事件得方法 关于 FlatList 上拉刷新和下拉加载详解地址 https://www.jia

react native 的上拉加载一直困扰着自己,一直用的第三方组件,但是可维护性不高,而且也不太好用,最近工作没那么忙,就研究下了官方的FlatList,做出来的成果,比第三方组件流畅度高好多,而且也很好用

官方介绍:https://reactnative.cn/docs/flatlist/

下面是效果图:

ios效果图

android效果图

总体思路就是:就是计算屏幕高度,然后减去导航的头部,根据列表高度计算出每页的个数,然后向上取整。这样做的目的是:防止不满屏状态下的,onEndReached函数的主动触发。

方法实现:

 //满屏页面判断 fullScreenJusting(ItemHeight) { const screnHeight = screnInfo.size.height; //屏幕高度 //计算列表个数 const listNum = (screnHeight - 40) / ItemHeight; return Math.ceil(listNum); }

下拉刷新用的是 RefreshControl

官网地址:https://reactnative.cn/docs/refreshcontrol/#progressbackgroundcolor

具体代码:

import React, { Component } from 'react';import { View, Text, Image, StyleSheet, FlatList, RefreshControl, ActivityIndicator,} from 'react-native';import { SafeAreaView } from 'react-navigation';import screnInfo from '../utils/View';import BaseStyle from '../constants/Style';import { QUESTION_LIST } from '../constants/Api';import { form_req } from '../utils/Request';export default class TestScreen extends Component { constructor(props) { super(props); this.state = { data: [ ], refreshing: false, fresh: true, animating: true, nomore: false, pageSize: 0, pageNumber: 1, }; } componentDidMount() { //初始化的时候要判断长度 控制上拉加载 const ListNums = this.fullScreenJusting(50); this.setState({ pageSize: ListNums }) this.onEndReachedCalled = false; this.getOrderList(ListNums, 1, true); } //满屏页面判断 fullScreenJusting(ItemHeight) { const screnHeight = screnInfo.size.height; //屏幕高度 //计算列表个数 const listNum = (screnHeight - 40) / ItemHeight; return Math.ceil(listNum); } getOrderList(ListNums, pageNumber, fresh) { let nomore; form_req(QUESTION_LIST, { page: pageNumber, perpage: ListNums, }).then(res => { if (res.code == 200) { const item = res.data; if (item.length < ListNums) { nomore = true } else { nomore = false } if (fresh) { this.setState({ data: item, nomore: nomore }) } else { this.setState({ data: this.state.data.concat(item), nomore: nomore, }) } // this.onEndReachedCalledDuringMomentum = true; } else { } }); } renderItem = item => { return ( <View style={styles.item} key={item.id}> <Text>{item.name}</Text> </View> ); }; //列表线 ItemSeparatorComponent = () => { return <View style={styles.baseLine} />; }; //头部 ListHeaderComponent = () => { }; //尾部 ListFooterComponent = () => { return ( <View style={styles.bottomfoot}> { this.state.data.length != 0 ? this.state.nomore ? ( <Text style={styles.footText}>- 我是有底线的 -</Text> ) : ( <View style={styles.activeLoad}> <ActivityIndicator size="small" animating={this.state.animating} /> <Text style={[styles.footText, styles.ml]}>加载更多...</Text> </View> ) : null } </View> ); }; //为空时 ListEmptyComponent() { return ( <View style={styles.noListView}> {/* <Image style={styles.noListImage} source={require('../images/status/order_no_record.png')} /> */} <Text style={styles.NoListText}>暂无订单</Text> </View> ); } _keyExtractor = (item,index) => item.id; _onEndReached = () => { if (!this.state.nomore && this.onEndReachedCalled ) { this.getOrderList(this.state.pageSize, ++this.state.pageNumber, false); } this.onEndReachedCalled=true; }; _onRefresh() { this.setState({ nomore: false, pageNumber: 1 }, () => { this.getOrderList(this.state.pageSize, 1, true); }) } render() { return ( <SafeAreaView style={BaseStyle.flex}> <View style={styles.listConten}> <FlatList data={this.state.data} keyExtractor={this._keyExtractor} onEndReached={this._onEndReached} refreshing={true} renderItem={({ item }) => this.renderItem(item)} ItemSeparatorComponent={this.ItemSeparatorComponent} ListEmptyComponent={this.ListEmptyComponent} ListFooterComponent={this.ListFooterComponent} onEndReachedThreshold={0.1} refreshControl={ <RefreshControl refreshing={this.state.refreshing} colors={['#ff0000', '#00ff00', '#0000ff']} progressBackgroundColor={"#ffffff"} onRefresh={() => { this._onRefresh(); }} /> } /> </View> </SafeAreaView> ); }}const styles = StyleSheet.create({ listConten: { flex: 1, backgroundColor: '#ffffff', }, item: { flexDirection: 'row', justifyContent: 'center', alignItems: "center", backgroundColor: '#ffffff', height: 50, }, baseLine: { width: screnInfo.size.width, height: 1, backgroundColor: '#eeeeee', }, noListView: { width: screnInfo.size.width, height: screnInfo.size.height - 140, justifyContent: 'center', alignItems: 'center', }, NoListText: { marginTop: 15, fontSize: 18, color: '#999999', }, noListImage: { width: 130, height: 140, }, bottomfoot: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding: 10, }, footText: { marginTop: 5, fontSize: 12, color: '#999999', }, activeLoad: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }, ml: { marginLeft: 10, },});

这里的坑就是:当初始化进来页面的时候 上拉会主动触发,所以这里加了一个开关 this.onEndReachedCalled = false; 初始化给一个false 当触发了 设为true,放在调取接口之后

代码都很简单易懂~ 有什么不懂的,或者有什么问题请留言,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

小编还为您整理了以下内容,可能对您也有帮助:

React-native ScrollView 上拉加载和下拉刷新

我们日常开发的时候,经常会遇到上拉加载更多的需求,原因很简单,数据量大的时候分批次加载可提高加载效率,为用户省点流量和时间。

这次我就给大家分享一下我写得 ScrollView (大佬勿喷),本人是在前端道路上越走越远得小菜鸡

言归正传

首先第一步,引入我们得ScrollView

引入完之后我们开始下面得操作

</ScrollView>

下面我们讲一下触底事件得方法

关于 FlatList 上拉刷新和下拉加载详解地址

https://www.jianshu.com/p/fb3bd2bf898c

react-native的常用组件及api

可用于flex布局使用

必须把文本节点放到Text中,否则会报错,Text组件内的子组件不支持flex布局

Android 是不支持 GIF 和 WebP 格式,你需要在android/app/build.gradle文件中根据需要手动添加

网络和 base64 数据的图片需要手动指定尺寸

在安卓中,如果使用图片大小远大于Image的图片会触发内存泄漏,只需要设置 Image 组件的 resizeMethod 属性为 resize 即可

提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等
能够配置出类似textarea、password,其他的多选、单选、下拉框等input类型需要引入第三方插件 https://www.jianshu.com/p/a7609fce8da4

ScrollView 实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)
一般来说我们会给 ScrollView 设置flex: 1以使其自动填充父容器的空余空间

Virtualized List 放在 ScrollView 中,ScrollView 是要全部渲染的,那么 Virtualized List 就计算不出来哪些 Cell 目前显示在屏幕上,会渲染所有的 Cell,那么它的优势就显现不出来了会报警告,所以尽量不要用ScrollView嵌套FlatList和SectionList
解释为什么不能嵌套 https://blog.csdn.net/gang544043963/article/details/106525516

ScrollView作为FlatList的父组件的时候,实现上拉加载更多使用onEndReached会无限加载,可以在ScrollView上监听onscroll事件触发加载更多或者不再用ScrollView把ScrollView中的其他内容放到FlatList 的ListHeaderComponent属性中。相见下方FlatList介绍使用。

一般使用TouchableHighlight 或者TouchableOpacity 代替

主要针对刘海屏,使用SafeAreaView包裹后,不会在刘海位置渲染页面,以免信息展示不全。
ScrollView的contentInsetAdjustmentBehavior="automatic"也有同样作用,但是滚动时会失效

react-native的常用组件及api

可用于flex布局使用

必须把文本节点放到Text中,否则会报错,Text组件内的子组件不支持flex布局

Android 是不支持 GIF 和 WebP 格式,你需要在android/app/build.gradle文件中根据需要手动添加

网络和 base64 数据的图片需要手动指定尺寸

在安卓中,如果使用图片大小远大于Image的图片会触发内存泄漏,只需要设置 Image 组件的 resizeMethod 属性为 resize 即可

提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等
能够配置出类似textarea、password,其他的多选、单选、下拉框等input类型需要引入第三方插件 https://www.jianshu.com/p/a7609fce8da4

ScrollView 实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)
一般来说我们会给 ScrollView 设置flex: 1以使其自动填充父容器的空余空间

Virtualized List 放在 ScrollView 中,ScrollView 是要全部渲染的,那么 Virtualized List 就计算不出来哪些 Cell 目前显示在屏幕上,会渲染所有的 Cell,那么它的优势就显现不出来了会报警告,所以尽量不要用ScrollView嵌套FlatList和SectionList
解释为什么不能嵌套 https://blog.csdn.net/gang544043963/article/details/106525516

ScrollView作为FlatList的父组件的时候,实现上拉加载更多使用onEndReached会无限加载,可以在ScrollView上监听onscroll事件触发加载更多或者不再用ScrollView把ScrollView中的其他内容放到FlatList 的ListHeaderComponent属性中。相见下方FlatList介绍使用。

一般使用TouchableHighlight 或者TouchableOpacity 代替

主要针对刘海屏,使用SafeAreaView包裹后,不会在刘海位置渲染页面,以免信息展示不全。
ScrollView的contentInsetAdjustmentBehavior="automatic"也有同样作用,但是滚动时会失效

React Native -Flatlist闪屏或者滑动抖动

Flastlist的属性设置如下:

为了优化列表的性能问题,设置了:let ITEM_HEIGHT = 180的变量,

_renderview的实现方法为:

在cell的具体实现过程中

造成闪屏的原因就在这个位置:因为在前面预渲染的过程中固定了cell高度为180,而在自定义cell的过程中又把高度设置成了200,两个高度不匹配就造成闪屏的原因;应该两个设置的地方的高度一致

快速滑动时,React Native的FlatList显示一些空白。请问有解决方案?

实现 getItemLayout方法, 提前告诉控件你flatList的高度。 能很大程度上优化你说的问题。有问题可以继续追问~

站点网还为您提供以下相关内容希望对您有帮助:

React-native ScrollView 上拉加载和下拉刷新

首先第一步,引入我们得ScrollView 引入完之后我们开始下面得操作 &lt;/ScrollView&gt; 下面我们讲一下触底事件得方法 关于 FlatList 上拉刷新和下拉加载详解地址 https://www.jianshu.com/p/fb3bd2bf898c ...

react-native的常用组件及api

ScrollView作为FlatList的父组件的时候,实现上拉加载更多使用onEndReached会无限加载,可以在ScrollView上监听onscroll事件触发加载更多或者不再用ScrollView把ScrollView中的其他内容放到FlatList 的ListHeaderComponent属性中。相见下方Flat...

做前端的人怎么找第一份工作?

项目架构:前后端分离模式、前端基于的是ReactNative技术栈独立开发的完整app;技术要点:ReactNative、ECMAScript6、Flex布局、ReactRouter、ReactNavigation 关键词:租房项目、在线租房、在线支付、AJAX、懒加载、下拉刷新、上拉加...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top