react-native实现上拉刷新下拉加载

最新推荐文章于 2025-06-24 09:37:25 发布

原创

最新推荐文章于 2025-06-24 09:37:25 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在React-Native应用中实现上拉刷新和下拉加载更多的功能，每次加载并缓存10条数据，有效提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每次加载十条数据，将加载好的数据放在缓存中

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    Dimensions,
    FlatList,
    NativeModules,
    ToastAndroid,
    AsyncStorage,
    Alert,
    TouchableOpacity
} from 'react-native';

var width = Dimensions.get('window').width;

import Icon from 'react-native-vector-icons/Ionicons';
import  requestCommon from '../../common/requestCommon';
import  Utils from '../../common/Utils';
import theme from '../../common/color'
//**上拉刷新，下拉加载
import Footer from '../../components/Footer';
import EmptyView from '../../components/EmptyView';
import LoadingView from '../../components/LoadingView';
//引入不成功，之后再看一下
// import  SwipeListView  from 'react-native-swipe-list-view';

var cacheResults={
    nextPage:2,
    items:[],
    total:0
};
export default class articleList extends Component<{}> {
    static navigationOptions = ({ navigation }) => ({
        title: '文章列表',
    });
    constructor(props) {
        super(props);

        this.state={
            dataSource: [],
            phoneNumber:'',
            filter_param:'',
            page_offset:'1',
            item_count:'20',//不可以太小
            total:'',
            newType:'',//新闻类别
            //刷新和加载
            refreshFlag:false,//正在刷新
            isLoadMore:false,//正在加载
            isLoading:false
        }
    }


    componentDidMount(){
        //本地存储
        console.log("文章列表页的type",this.props.navigation.state.params.newType);
        let  new