react native 中下拉列表FlatList组件的讲解以及实例demo

2024-05-17 03:33:58

RN中的下拉列表组件。以前RN的下拉列表是listView,但是这个组件的性能不咋地。当数据较多的时候就会很卡。所以RN就新出了一个FaltList组件来代替它。这里我们简单总结一下新的下拉组件。

一、使用场景

例如美团中的各种美食列表吧，我们需要让他们排列整齐，并且可以下拉刷新，一拉到底。要知道传过来的一定是数组格式的，那么我们需要做的就是把数据循环输出一下。。

二、FaltList的各种性质

（1）具体可参考RN官网：http://reactnative.cn/docs/0.50/flatlist.html#content
（2）我们需要知道的：
高性能的简单列表组件，支持下面这些常用的功能：

完全跨平台。
支持水平布局模式。
行组件显示或隐藏时可配置回调事件。
支持单独的头部组件。
支持单独的尾部组件。
支持自定义行间分隔线。
支持下拉刷新。
支持上拉加载。
支持跳转到指定行（ScrollToIndex）。

三、具体的使用

（1）数据的获取

具体的请看标注部分。解释的很清楚啦

（2）FaltList的使用

在render中使用该组件。记得最外围要用,保证可以无限下拉。具体的看标注哈

（3）renderItem部分代码

这部分是我们渲染的主要部分。我这边也给标注了一下，大家看看就理解了。

（4）keyExtractor部分

这部分需要定义的。因为我们除了显示列表之外。我们还需要把自己的数据渲染上去。并且针对每个小模块进行操作。这里就必须区分每个模块。

（5）分割线部分

分割线，看起来更好看。

四、模拟器显示

这里显示的就是我们具体的列表了。每个模块之间都是区分开的。楼主不怎么会写样式，所以效果看起来一般。大家可以自己试试。

OK，这就是RN的下拉列表组件了。按照我这里的流程的话，能成功的把列表显示出来。然后接下来就是我们自己的逻辑了。

end,加油

react native 中下拉列表FlatList组件的讲解以及实例demo相关推荐

React Native中一些常用组件用法
View组件 View是一个支持Flexbox布局.样式.一些触摸处理.和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图. View的设计初衷是和StyleShee ...
如何在React Native中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
如何在 React Native 中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
Android之React Native 中组件的生命周期
React Native 中组件的生命周期概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对 ...
理解 React Native 中的 AJAX 请求
曾经,大多数 Web 应用程序通过用户操作刷新整个网页以与 Web 服务器通信. 后来,AJAX(异步 JavaScript 和 XML)概念通过提供一种在后台与 Web 服务器通信的方式使 Web ...
在 React Native 中实现 3D 动画
本文的范围将涵盖对 Three.js 库和 Animated API 的探索. 您应该具备 JavaScript 和 React Native 的基本知识才能继续学习: 要了解更多关于可以在 Reac ...
如何在React Native中使用react-navigation 5处理导航
React-navigation is the navigation library that comes to my mind when we talk about navigation in Re ...
如何在React Native中使用Redux Saga监视网络更改
by Pritish Vaidya 通过Pritish Vaidya 如何在React Native中使用Redux Saga监视网络更改 (How to monitor network change ...
android 倒计时封装,react native中的聊天气泡及timer封装成的发送验证码倒计时
其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可 ...

最新文章

热门文章