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

时间:2024-03-15 22:33:32

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

一、使用场景

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

二、FaltList的各种性质

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

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

三、具体的使用

(1)数据的获取

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

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

(2)FaltList的使用

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

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

(3)renderItem部分代码

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

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

(4)keyExtractor部分

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

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

(5)分割线部分

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

分割线,看起来更好看。

四、模拟器显示

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

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

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

end,加油