React Native使用FlatList组件实现上拉加载

运行成功截图：

代码如下：

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  FlatList,
  Text,
  RefreshControl,
  ActivityIndicator,
} from 'react-native';
import { thisExpression } from '@babel/types';

const tempDatas = [
  {
    color:'blue',
    title:'常温',
    value:70,
  },
  {
    color:'blue',
    title:'常温',
    value:70,
  },
  {
    color:'pink',
    title:'高温',
    value:70,
  },
  {
    color:'blue',
    title:'常温',
    value:70,
  },
  {
    color:'blue',
    title:'常温',
    value:70,
  },
  {
    color:'blue',
    title:'常温',
    value:70,
  },
  {
    color:'blue',
    title:'常温',
    value:70,
  },
  {
    color:'gray',
    title:'低温',
    value:70,
  },
  {
    color:'blue',
    title:'常温',
    value:70,
  },
  {
    color:'blue',
    title:'常温',
    value:70,
  },
  {
    color:'blue',
    title:'常温',
    value:70,
  },
  {
    color:'blue',
    title:'常温',
    value:70,
  },
  {
    color:'blue',
    title:'常温',
    value:70,
  },
];

const tempAddDatas = [];
for(var i=10;i<12;i++){
  tempAddDatas.push({
    color:'blue',
    title:'新增'+i+'',
    value:66,
  })
}

export default class ListDemo extends Component {
  constructor() {
    super();
    this.state = {
      isLoading : false,
      dataArray : tempDatas,
    }
  }

  loadData(pullUp) {
    setTimeout( ()=> {
      var dataArray = [];
      if(pullUp) {
        dataArray = this.state.dataArray;
        dataArray = [...this.state.dataArray,...tempAddDatas]//每次新增
      }
      this.setState({
        dataArray : dataArray,
        isLoading : false,
      })
    }, 1000);
  }

  separator = () =>{
    return <View style={{height:1,backgroundColor:'#999999'}}/>;
  }

  _renderItem(data) {
    return (
      <View style = { styles.item}>
        <Text style = { styles.itemTextFrist }
              style={{backgroundColor:data.item.color,
                height:15,
                width:15,
                marginRight:10,
                borderBottomLeftRadius:10,
                borderBottomRightRadius:10,
                borderTopLeftRadius:10,
                borderTopRightRadius:10,
              }}>
        </Text>
        <Text style = { styles.itemText } >{ data.item.title }:</Text>
        <Text style = { styles.itemText }>{ data.item.value }</Text>
      </View>
    );
  }

  genIndicator () {
    return <View style = { styles.IndicatorContainer}>
      <ActivityIndicator  //显示一个圆形的 loading 提示符号。
        style = { styles.Indicator }
        size = {"small"}
        animating = {true}
        color = { 'blue' }
      />
      <Text>正在加载更多</Text>
    </View>
  }

  render () {
    return (
      <View style = { styles.container }>
        <Text style = {styles.headbox}>sd</Text>
        <FlatList
          data = { this.state.dataArray }
          renderItem = { (data) => this._renderItem(data) }
          keyExtractor={(item,index) => index}
          numColumns ={1}//一行一列
          ListFooterComponent = { () => this.genIndicator()}//底部组件
          onEndReached = {//列表被滚动到距离内容最底部不足onEndReachedThreshold设置的的距离时调用。
          () => {
            this.loadData(true);
          }
        }
         onEndReachedThreshold={0.5}//0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发onEndReached回调
          ItemSeparatorComponent={this.separator}//分割线
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container : {
    flex : 1,
  },
  headbox : {
    height : 40,
    lineHeight:40,
    paddingLeft : 15,
    backgroundColor : 'blue',
    color:'white',
    fontSize : 20,
  },
  item : {
    height : 40,
    paddingLeft : 15,
    alignItems : "center",
    flexDirection:'row',
    width:90,
    justifyContent:'space-between'
  },
  itemText : {
    backgroundColor : "white",
    fontSize : 20,
  },

  IndicatorContainer : {
    alignItems : "center"
  },
  Indicator : {
    marginBottom : 10,
  },
});