react-native实现瀑布流

瀑布流的布局可以说是屡见不鲜,虽然它没什么新意,但是在许多场景都是绝佳的布局方式,运用得当能给人良好的视觉体验。

本文主要是讲在RN中实现瀑布流布局的思路。

a.首先把布局分为几列

这个比较容易理解,瀑布流能实现列表下拉刷新,那肯定要用到flatlist。分为多少列,无非就是在一个页面中有多少个flatList并排显示而已。

b.如何实现参差不齐的效果

这个原理和web中的瀑布流布局一样,就是通过计算每个item的高度来判断这个item该在那个flatlist中渲染,然后把最新的item在最低的位置渲染就可以了。

下面我们来通过代码描述这个过程:

1.高度必须得外部告知,这样内部才能知道如何指派数据,把目标单一数据源分为几个小数据源。

image.png

2.根据小数据源渲染个数渲染对应的VirtualizedList

这里用的VirtualizedList是FlatList和SectionList的父组件,VirtualizedList的属性,FlatList和SectionList都能够找到。

image.png

很多功能和细节可以根据个人需求加以定制,这差不多就是瀑布流的核心代码,只是通过指定的column数量来筛选数据渲染UI。

thanks!

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容