React-Native之FlatList

FlatList使用：

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


const cityNames = ['北京', '上海', '广州', '杭州'];

export default class ListDemo extends Component {

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

    loadData(pullUp) {
        this.setState({
            isLoading : true,
        });
        setTimeout( ()=> {
            var dataArray = [];
            if(pullUp) {
                dataArray = this.state.dataArray;
                dataArray.push("河南");
            }else {
                for(let i=this.state.dataArray.length-1;i>=0;i--) {
                    dataArray.push(this.state.dataArray[i]);
                }   
            }
            this.setState({
                dataArray : dataArray,
                isLoading : false,
            })
        }, 2000);
    }

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

    genIndicator () {
        return <View style = { styles.IndicatorContainer}>
                <ActivityIndicator 
                    style = { styles.Indicator }
                    size = {"small"}
                    animating = {true}
                    color = { 'blue' }
                />
                <Text>正在加载更多</Text>
            </View>
    }

    render () {
        return (
        <View style = { styles.container }>
            <FlatList 
                data = { this.state.dataArray }
                renderItem = { (data) => this._renderItem(data) }
                refreshControl = {
                    <RefreshControl 
                        title = "loading"
                        tintColor = "red"
                        refreshing = { this.state.isLoading }
                        onRefresh = { ()=> {
                            this.loadData(false);
                        }}
                    />
                }
                ListFooterComponent = { () => this.genIndicator() }
                onEndReached = {
                    () => {
                        this.loadData(true);
                    }
                }
            />
        </View>
        );
    }
}

const styles = StyleSheet.create({
  container : {
    flex : 1,
    backgroundColor : "orange",
  },
  item : {
      backgroundColor : 'blue',
      height : 200,
      marginRight : 15,
      marginLeft : 15,
      marginBottom : 15,
      alignItems : "center",
      justifyContent : "center",
  },
  itemText : {
      backgroundColor : "white",
      fontSize : 20,
  },
  IndicatorContainer : {
      alignItems : "center"
  },
  Indicator : {
    marginBottom : 10,  
  },
});