FlatList中实战使用

最新推荐文章于 2023-05-14 21:52:23 发布

signlesun

最新推荐文章于 2023-05-14 21:52:23 发布

阅读量611

点赞数

本文链接：https://blog.csdn.net/weixin_42262889/article/details/95356663

版权

本文详细探讨了在React Native中的FlatList组件的使用，包括如何优化性能，处理长列表滚动，以及结合各种道具实现复杂布局。通过实例展示了FlatList在实际项目中的应用，帮助开发者更好地理解和掌握这一高效列表渲染工具。

摘要由CSDN通过智能技术生成

import React, {Component} from 'react';
import {
    ActivityIndicator,
    FlatList,
    Image,
    RefreshControl,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
//屏幕信息
const dimensions = require('Dimensions');
//获取屏幕的宽度和高度
const {width, height} = dimensions.get('window');


export default class App extends Component {

    constructor(props) {
        super(props);
        //当前页
        this.page = 1
        //状态
        this.state = {
            // 列表数据结构
            dataSource: [],
            // 下拉刷新
            isRefresh: false,
            // 加载更多
            isLoadMore: false,
            // 控制foot  1：正在加载   2 ：无更多数据
            showFoot: 1,
        }
    }

    /**
     * 获取360 下载列表
     * @private
     */
    _getHotList() {
        this.state.isLoadMore = true
        fetch("http://m.app.haosou.com/index/getData?type=1&page=" + this.page)
            .then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson)
                if (this.page === 1) {
                    console.log("重新加载")
                    this.setState({
                        isLoadMore: false,
                        dataSource: responseJson.list
                    })
                } else {
                    console.log("加载更多")
                    th