列表组件flatList 上拉加载，下拉刷新

快来打我* 2022-05-23 07:58 280阅读 0赞

初始化项目

react-native init FasterList

运行项目

react-native run-android

从APP.js里跳转到一个页面，再从另外一个页面跳转到另一个页面

需要引入

npm react-navigation --save

在index，js（索引页面）页面

导入Stacknavigator

创建一个导航器

组件APP

<FlatList
        data={
      this.state.dataArray}
        renderItem={(data) => this._renderItem(data)
        }
        // //下拉刷新
        // refreshing={this.state.isLoading}
        // //当激发下拉刷新后，回调下拉刷新方法，执行loaddata方法
        // onRefresh={() => {
        //     this.loadData();
        // }}
        refreshControl={
            <RefreshControl
                title={
      'Loading'}
                colors={['red']}
                refreshing={
      this.state.isLoading}
                onRefresh={() => {
                    this.loadData();
                }}
            />
        }
    
    />

ActivityIndicator组件是加载的圆圈图标

![20180607131750817][]

![20180607131928985][]

侧滑删除

![20180607205529449][]![20180607205535569][]

分组列表

组件名为

SectionList

SectionList

SectionList

[20180607131750817]: /images/20220523/c95c036d36ac4b7fa56bd41a876b8083.png
[20180607131928985]: /images/20220523/ad24e3a055254b8285c47ebbaae22065.png
[20180607205529449]: https://img-blog.csdn.net/20180607205529449
[20180607205535569]: /images/20220523/ef0717f024584a219f034fb49c6dad14.png

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关上拉加载下拉刷新

老方法，先上效果图： ![1264306-20190925171702811-981213350.gif][] 1.加入下拉刷新上拉加载的依赖 1 //下拉刷新

一时失言乱红尘/ 2023年08月17日 17:09/ 0 赞/ 128 阅读

相关 vant-list上拉加载下拉刷新

[vant-list官网示例][vant-list] ，vant-list各参数释义如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

阳光穿透心脏的1/2处/ 2023年01月11日 15:26/ 0 赞/ 271 阅读

相关 php 上拉加载下拉刷新页面,上拉加载，下拉刷新（即分页功能）

Hello APP \contant\{ \} .ids\{ text-align: center; margin-bottom: 5px; border-bott

约定不等于承诺〃/ 2022年10月21日 12:53/ 0 赞/ 316 阅读

相关 RecyclerView 下拉刷新和上拉加载

RecyclerView 下拉刷新和上拉加载 RecyclerView已经出来很久了，许许多多的项目都开始从ListView转战RecyclerView，那么，上拉加载和

小灰灰/ 2022年07月24日 04:05/ 0 赞/ 573 阅读

相关下拉刷新上拉加载

下拉刷新： ![Center][] ![Center 1][] ![Center 2][] 上划加载 ![Center 3][] ![C

约定不等于承诺〃/ 2022年07月17日 02:22/ 0 赞/ 345 阅读

相关列表组件flatList 上拉加载，下拉刷新

初始化项目 react-native init FasterList 运行项目 react-native run-android 从APP.js里跳转到一个页面，再从另

快来打我*/ 2022年05月23日 07:58/ 0 赞/ 281 阅读

相关 RecyclerView 上拉加载下拉刷新

RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout and

以你之姓@/ 2022年01月07日 12:13/ 0 赞/ 362 阅读

相关 mui上拉刷新下拉加载

废话不多说，直接上代码 1、容器  <div id="refreshContainer" class="mui-content m

Dear 丶/ 2021年09月15日 16:48/ 0 赞/ 434 阅读

相关 uniapp下拉刷新上拉加载

一、需求留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据二、代码 ![在这里插入图片描述][watermark_t

﹏ヽ暗。殇╰゛Y/ 2021年09月03日 04:51/ 0 赞/ 701 阅读

相关 flutter 上拉加载和下拉刷新

上拉加载 1、定义ScrollController控制器 ScrollController scroll=new ScrollController

迷南。/ 2021年07月24日 14:32/ 0 赞/ 504 阅读