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

朱雀 2022-05-23 07:36 196阅读 0赞

# 代码（单页）： #

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
        }
    })

# 效果： #

图一：初始化图

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

图三：上拉（新添数据）

# 图： #

![70][] ![70 1][] ![70 2][]

[70]: https://img-blog.csdn.net/20180604213341697?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180604213404186?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220523/96592c2cbc7d47df980e028a5015a788.png