react native基于FlatList下拉刷新上拉加载实现

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

react native 的上拉加载一直困扰着自己，一直用的第三方组件，但是可维护性不高，而且也不太好用，最近工作没那么忙，就研究下了官方的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,放在调取接口之后

这里对组件进行了封装，我们只需关注页面渲染和下拉上拉事件，其他交给组件，使用的时候也不用写一大推代码

组件代码：

'use strict';

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  RefreshControl,
  ActivityIndicator,
} from 'react-native';

import screnInfo from '../utils/View';
import PropTypes from 'prop-types';

/**
 * 使用方法  
 * 
 * 
 */

export default class PullAndLoadScreen extends Component {
  static defaultProps = {
    data: [],
    ItemSeparatorComponent: () => {
      return <View style={styles.baseLine} />
    },
    ListEmptyComponent: () => {
      return (
        <View style={styles.noListView}>
          <Text style={styles.NoListText}>这里空空如也~</Text>
        </View>
      );
    },
    refreshing: false,
    animating: true,
    ItmeHeight: 50,


  };
  static propTypes = {
    data: PropTypes.array,
    keyExtractor: PropTypes.func,
    onEndReached: PropTypes.func,
    renderItem: PropTypes.func,
    ItemSeparatorComponent: PropTypes.func,
    ListEmptyComponent: PropTypes.func,
    ListFooterComponent: PropTypes.func,
    refreshing: PropTypes.bool,
    colors: PropTypes.array,
    progressBackgroundColor: PropTypes.string,
    onRefresh: PropTypes.func,
    animating: PropTypes.bool,
    nomore: PropTypes.bool,
    ItmeHeight: PropTypes.number,

  };


  constructor(props) {
    super(props);
  }
  _ListFooterComponent = () => {
    const { data, nomore, animating } = this.props;
    return (
      <View style={styles.bottomfoot}>
        {
          data.length != 0 ?
            nomore ? (
              <Text style={styles.footText}>- 我是有底线的 -</Text>
            ) : (
                <View style={styles.activeLoad}>
                  <ActivityIndicator size="small" animating={animating} />
                  <Text style={[styles.footText, styles.ml]}>加载更多...</Text>
                </View>
              )
            :
            null
        }

      </View>
    );
  };
  _renderItem = (item) => {
    return  this.props.renderItem(item);
  }

  render() {
    const {
      data,
      keyExtractor,
      onEndReached,
      ItemSeparatorComponent,
      ListEmptyComponent,
      refreshing,
      colors,
      progressBackgroundColor,
      onRefresh,

    } = this.props;
    return (
   
        <FlatList
          data={data}
          keyExtractor={keyExtractor}
          onEndReached={onEndReached}
          refreshing={true}
          renderItem={({ item }) => this._renderItem(item)}
          ItemSeparatorComponent={ItemSeparatorComponent}
          ListEmptyComponent={ListEmptyComponent}
          ListFooterComponent={this._ListFooterComponent}
          onEndReachedThreshold={0.1}
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
              colors={colors}
              progressBackgroundColor={progressBackgroundColor}
              onRefresh={onRefresh}
            />
          }
        />
   
    );
  }
}

const styles = StyleSheet.create({
  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',
  },
  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,
  },
});

使用

/* eslint-disable */
import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
} 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';
import Pull_Load from "../components/pull_load";

export default class PullAndLoadScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
      ],
      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,
          })
        }

      } else {

      }
    });
  }

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

  }
  renderItem(item){
    return (
      <View style={styles.item}>
        <Text>{item.name}</Text>
      </View>
    );
  };

  _keyExtractor = (item) => item.id;


  render() {
    return (
      <SafeAreaView style={BaseStyle.flex}>
        <View style={styles.listConten}>
        <Pull_Load
          data={this.state.data}
          keyExtractor={this._keyExtractor}
          onEndReached={this._onEndReached}
          nomore={this.state.nomore}
          renderItem={this.renderItem.bind(this)}
          onRefresh={this._onRefresh.bind(this)}
        />
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  listConten: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  item: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: "center",
    backgroundColor: '#ffffff',
    height: 50,
  },


  
  
});

代码都很简单易懂~ 有什么不懂的，或者有什么问题请留言

最后编辑于：2018.09.30 12:05:06

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,772评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,458评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,610评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,640评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,657评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,590评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,962评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,631评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,870评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,611评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,704评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,386评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,969评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,944评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,179评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,742评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,440评论 2赞 342

react native基于FlatList下拉刷新上拉加载实现

这里对组件进行了封装，我们只需关注 页面渲染 和 下拉 上拉事件，其他交给组件，使用的时候也不用写一大推代码

使用

推荐阅读更多精彩内容

这里对组件进行了封装，我们只需关注页面渲染和下拉上拉事件，其他交给组件，使用的时候也不用写一大推代码