React-Native之（小白计划五）FlatList的Demo

代码（单页）：

import React, { Component } from 'react';

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


type Props = {};
const CITY_NAMES = ['北京', '上海', '广州','杭州', '苏州'];
export default class FlatListDemo extends Component<Props> {
    static navigationOptions = {
        title: 'FlatListDemo',
    };
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,//初始化的状态，此时加载状态为不加载
            dataArray: CITY_NAMES//初始数据
        }
    }

    loadData=(refreshing)=>{//根据传入数据判断是上拉还是下拉
        if (refreshing) {
            this.setState({
                isLoading: true//设置state为正在加载
            });
        }
        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("我是底部新加的");
            }

            this.setState({
                dataArray: dataArray,//把数据重置为最新
                isLoading: false,//把加载状态设置为不加载（即加载结束）
            })
        }, 2000);
    };

    _renderItem= (data)=> {//自定义的渲染组件
        return <View style={styles.item}>
            <Text syle={styles.text}>{data.item}</Text>
        </View>
    };

    genIndicator= ()=>{ //底部加载(一个圆圈)
        return <View style={styles.indicatorContainer}>
            <ActivityIndicator
                style={styles.indicator}
                size={'large'}
                color={'red'}
                animating={true}
            />
            <Text>正在加载更多</Text>
        </View>
    };

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    //1:数据的获取和渲染
                    data={this.state.dataArray}
                    renderItem={(data) => this._renderItem(data)}//将List中的renderRow中的内容抽出来单独放成一个组件来渲染
                    // refreshing={this.state.isLoading}
                    // onRefresh={() => {
                    //     this.loadData();
                    // }}
                    //2:自定义的下拉刷新
                    refreshControl={        //为控制listView下拉刷新的属性  用于自定义下拉图标设置
                        <RefreshControl         //这一组件可以用在ScrollView或ListView内部，为其添加下拉刷新的功能。
                            title={'Loading'}
                            colors={['red']}//android的刷新图标颜色
                            tintColor={'orange'}//ios的刷新图标颜色
                            titleColor={'red'}//标题的颜色
                            refreshing={this.state.isLoading}//判断是否正在刷新
                            onRefresh={() => {                  //触动刷新的方法
                                this.loadData(true)//加载数据(带参数)
                            }}
                        />
                    }

                    //3:自定义的上拉加载数据
                    ListFooterComponent={() => this.genIndicator()}//上拉加载更多的时候调用自定义的加载图标，一般为一个loading的圆圈（ActivityIndicator）
                    onEndReached={() => {//当所有的数据都已经渲染过，并且列表被滚动到距离最底部时调用
                        this.loadData()//加载数据（不带参数）
                    }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    item: {
        backgroundColor: '#c5ecff',
        height: 150,
        marginRight: 15,
        marginLeft: 15,
        marginBottom: 15,
        alignItems: 'center',
        justifyContent: 'center',
        elevation:5,//漂浮的效果
        borderRadius:5,//圆角
    },
    text: {
        color: 'white',
        fontSize: 20,
    },
    indicatorContainer: {
        alignItems: 'center'
    },
    indicator: {
        color: 'red',
        margin: 10
    }
})

效果：

图一：初始化图

图二：下拉（城市名称反转）

图三：上拉（新添数据）

图：