官方文档:
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: [],
}
}
//生命周期的函数(不要用箭头函数)
com