reactnative中怎么利用FlatList实现下拉刷新上拉加载功能
本篇文章为大家展示了react native中怎么利用FlatList实现下拉刷新上拉加载功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联建站是一家专业提供嘉禾企业网站建设,专注与成都网站制作、成都网站建设、HTML5建站、小程序制作等业务。10年已为嘉禾众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
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 (); }; //列表线 ItemSeparatorComponent = () => { return {item.name} ; }; //头部 ListHeaderComponent = () => { }; //尾部 ListFooterComponent = () => { return ( { this.state.data.length != 0 ? this.state.nomore ? ( ); }; //为空时 ListEmptyComponent() { return (- 我是有底线的 - ) : () : null } 加载更多... {/* ); } _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 (*/} 暂无订单 ); } } 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.renderItem(item)} ItemSeparatorComponent={this.ItemSeparatorComponent} ListEmptyComponent={this.ListEmptyComponent} ListFooterComponent={this.ListFooterComponent} onEndReachedThreshold={0.1} refreshControl={ { this._onRefresh(); }} /> } />
这里的坑就是:当初始化进来页面的时候 上拉会主动触发,所以这里加了一个开关 this.onEndReachedCalled = false; 初始化给一个false 当触发了 设为true,放在调取接口之后
上述内容就是react native中怎么利用FlatList实现下拉刷新上拉加载功能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
网站题目:reactnative中怎么利用FlatList实现下拉刷新上拉加载功能
网站网址:http://myzitong.com/article/jjggjj.html