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

react

RN中的下拉列表组件。以前RN的下拉列表是listView,但是这个组件的性能不咋地。当数据较多的时候就会很卡。所以RN就新出了一个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,加油