ReactNative学习----10列表组件FlatList的使用

官方文档：
https://reactnative.cn/docs/flatlist.html#docsNav

效果图：

项目结构：

实现功能：
1请求数据
2渲染数据
3实现下拉刷新
4实现上拉加载

代码：
FlatListDemo.js中是请求数据，渲染数据
Item.js是渲染条目的
FlatListDemo.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, FlatList, ActivityIndicator} from 'react-native';
import Item from "./Item";

/**
 *  FlatList
 *  https://reactnative.cn/docs/flatlist.html#docsNav
 *  1请求数据
 *  2渲染数据
 *  3实现下拉刷新
 *  4实现上拉加载
 */

export default class FlatListDemo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            mytotal: 0,
            //下拉刷新的固定字段
            refreshing: false,
            // 是否显示页脚
            moreLoad: false,
            // 从第几条查询数据
            start: 0,
            //  每页5条数据
            count: 5,
            // 接口返回的数据
            list: [],


        }
    }

    //生命周期的函数（不要用箭头函数）
    componentDidMount() {
        this.httpMoreLoadData(true);
    }

    /**
     * 下拉刷新
     * @returns {Promise}
     */
    httpRefresh = async () => {
        this.setState({
            refreshing: true,
        })
        let api = `https://douban.uieee.com/v2/movie/coming_soon`;
        let url = `${api}?start=${0}&count=${this.state.count}`;
        // 请求数据
        let rawData = await fetch(url);
        //拿到的数据转成json字符串
        let dataStr = await rawData.text();
        // 转化成json
        let jsonData = JSON.parse(dataStr);

        this.setState({
                //列表赋值给data
                list: jsonData.subjects,
                refreshing: false,
                //从哪一条开始，查询数据
                start: this.state.count,

            }
        )
    }

    /**
     * 加载
     * @param reset
     * reset 判断是 componentDidMount 调用，还是 onEndReached 调用
     *
     * 刚进来时会调用httpMoreLoadData（通过componentDidMount调用）
     * 刷新时候，由于state改变，也会调用这里 （通过componentDidMount调用）
     *
     */
    httpMoreLoadData = async (reset) => {
        //小于-1，说明是最后一页了，在页没有数据了
        if (this.state.start < 0) {
            return;
        }
        // console.warn('打印'+this.state.moreLoad);
        // 页脚处于显示状态，表示是请求状态，不需要在请求
        if (this.state.moreLoad) {
            return;
        }
        this.state.start = reset ? 0 : this.state.start;
        this.setState({
            moreLoad: true
        });
        let url = `https://douban.uieee.com/v2/movie/coming_soon?start=${this.state.start}&count=${this.state.count}`;
        // 请求数据
        let rawData = await fetch(url);
        //拿到的数据转成json字符串
        let dataStr = await rawData.text();
        // 转化成json
        let jsonData = JSON.parse(dataStr);
        let oneList = jsonData.subjects;
        //  对拿到的数组进行判断
        this.setState({
            mytotal:jsonData.total,
            // 隐藏页脚
            moreLoad: false,
            // 列表数据
            list: reset ? oneList : [...this.state.list, ...oneList],
            // 从那一条开始，-1，表示已经是最后一页了
            start: oneList.length < this.state.count ? -1 : this.state.start + this.state.count,
        })


    }


    render() {
        return (
            
                {this.state.mytotal}

                 item.id}
                    // 是否刷新
                    refreshing={this.state.refreshing}
                    // 刷新时请求数据
                    onRefresh={() => this.httpRefresh()}


                    //加载，距离底部很近时，触发 onEndReached
                    onEndReachedThreshold={0.1}
                    //加载，请求数据，  和下面的等效，传参
                    onEndReached={() => this.httpMoreLoadData(false)}

                    //渲染页脚，在这里做判断会改变 moreLoad 的值
                    ListFooterComponent={() => {
                        return this.state.moreLoad && 
                    }}

                    data={this.state.list}
                    renderItem={({item}) => }

                >

                


            
        );
    }
}

const styles = StyleSheet.create({
    root: {
        height: '100%',
    },
    loading: {
        height: 200,
    }

});

Item.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, Dimensions, TouchableOpacity, Button} from 'react-native';
//影院列表的条目
export default class Item extends Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (
            
                
                {this.props.title}
            
        );
    }

}
const styles = StyleSheet.create({
    itemRoot: {
        width: '100%',
        height: 60,
        paddingLeft: 10,
        flexDirection:'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        borderBottomWidth:1,
        borderColor:'#b2b2b2'

    },
    text: {
        fontSize: 20,
        marginLeft:10,
    },
    image: {
        width: 50,
        height: 50,
    },

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

源码下载：
bkdemo1----FlatListDemo
https://download.csdn.net/download/zhaihaohao1/11022393