React Native 之FlatList 下拉刷新和上拉加载更多

接上一篇代码: 只修改了FlatListDemo.js里面的代码

import React, {Fragment,Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  FlatList,
  RefreshControl,
  ActivityIndicator,
  ListFooterComponent,
} from 'react-native';

const CITY_NAME = ['北京','上海','广州','武汉','杭州','三亚','宁波','杭州','合肥','芜湖','福州','厦门','温州'];
export default class MyPointPage extends Component {

  constructor(props){
    super(props);
    this.state={
      isLoading:false,
      dataArray: CITY_NAME
    }
  }

  loadData(refreshing){
    console.log('loadData=========')
    if (refreshing) {
      this.setState({
        isLoading:true
      });
    }

    setTimeout(()=>{
      let dataArray = [];
      if (refreshing) {
        for(let i = this.state.dataArray.length-1;i>=0;i--){
          dataArray.push(this.state.dataArray[i]);
        }
      }
      else {
        dataArray=this.state.dataArray.concat(CITY_NAME);
      }

      this.setState({
        dataArray:dataArray,
        isLoading:false
      })
    },2000);
  }

  genIndicator(){
    return <View style={styles.indicatorContainer}>
      <ActivityIndicator
        style={styles.indicator}
        size={'large'}
        animating={true}
      />
      <Text>正在加载更多</Text>
    </View>
  }

  _renderItem(data){
    return <View style={styles.item}>
          <Text style={styles.text}>{data.item}</Text>
    </View>
  }

  render(){
    return (
      <View>
        <FlatList
          data={this.state.dataArray}
          renderItem={(data)=>this._renderItem(data)}
          // refreshing={this.state.isLoading}
          // onRefresh={()=>{
          //   this.loadData();
          // }}
          //要定制刷新外观不能用上面这个,要用下面这个
          refreshControl = {
            <RefreshControl
              title={'加载中...'}
              colors={['red']}//此颜色无效
              tintColor={'orange'}
              titleColor={'red'}//只有ios有效

              refreshing={this.state.isLoading}
              onRefresh={()=>{
                this.loadData(true);
              }}

            />
          }
          ListFooterComponent={()=>this.genIndicator()}//上拉加载更多视图
          onEndReached={()=>{
            this.loadData()
          }}
          onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
        />
      </View>
      );
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    alignItems:'center',
    backgroundColor: '#F5FCFF'
  },
  item:{
    backgroundColor: '#168',
    height:200,
    marginRight:15,
    marginLeft:15,
    marginBottom:15,
    alignItems:'center',
    //justifyContetnt:'center',


  },
  text:{
    color:'white',
    fontSize:20,
  },
  indicatorContainer:{
    alignItems:'center'
  },
  indicator:{
    color:'red',
    margin:10
  }

})

import React, {Fragment,Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  FlatList,
  RefreshControl,
  ActivityIndicator,
  ListFooterComponent,
} from 'react-native';

const CITY_NAME = ['北京','上海','广州','武汉','杭州','三亚','宁波','杭州','合肥','芜湖','福州','厦门','温州'];
export default class FlatListDemo extends Component {

  constructor(props){
    super(props);
    this.state={
      isLoading:false,
      dataArray: CITY_NAME
    }
  }

  loadData(refreshing){
    if (refreshing) {
      this.setState({
        isLoading:true
      });
    }

    setTimeout(()=>{
      let dataArray = [];
      if (refreshing) {
        for(let i = this.state.dataArray.length-1;i>=0;i--){
          dataArray.push(this.state.dataArray[i]);
        }
      }
      else {
        dataArray=this.state.dataArray.concat(CITY_NAME);
      }

      this.setState({
        dataArray:dataArray,
        isLoading:false
      })
    },2000);
  }

  genIndicator(){
    return <View style={styles.indicatorContainer}>
      <ActivityIndicator
        style={styles.indicator}
        size={'large'}
        animating={true}
      />
      <Text>正在加载更多</Text>
    </View>
  }

  _renderItem(data){
    return <View style={styles.item}>
          <Text style={styles.text}>{data.item}</Text>
    </View>
  }

  render(){
    return (
      <View>
        <FlatList
          data={this.state.dataArray}
          renderItem={(data)=>this._renderItem(data)}
          // refreshing={this.state.isLoading}
          // onRefresh={()=>{
          //   this.loadData();
          // }}
          //要定制刷新外观不能用上面这个,要用下面这个
          refreshControl = {
            <RefreshControl
              title={'加载中...'}
              colors={['red']}//此颜色无效
              tintColor={'orange'}
              titleColor={'red'}//只有ios有效

              refreshing={this.state.isLoading}
              onRefresh={()=>{
                this.loadData(true);
              }}
            />
          }
          ListFooterComponent={()=>this.genIndicator()}//上拉加载更多视图
          onEndReached={()=>{
            this.loadData()
          }}
        />
      </View>
      );
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    alignItems:'center',
    backgroundColor: '#F5FCFF'
  },
  item:{
    backgroundColor: '#168',
    height:200,
    marginRight:15,
    marginLeft:15,
    marginBottom:15,
    alignItems:'center',
    //justifyContetnt:'center',


  },
  text:{
    color:'white',
    fontSize:20,
  },
  indicatorContainer:{
    alignItems:'center'
  },
  indicator:{
    color:'red',
    margin:10
  }

})

效果图: