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

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

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, },});