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
  }

})

效果圖: