特性
- 性能方面表现突出，渲染速度快，滚动体验良好
- 无需手动设置item高度，一切计算工作由组件内部完成
- 属性和方法与FlatList完全一致，易于上手
Changelogs
-
[1.1.1]
- 移除手动设置item高度，一切计算工作由组件内部完成
- 进一步提升体验，性能表现极佳
展示案例
下面展示的是一个包括下拉刷新，上拉加载更多的高性能瀑布流列表
62f3cef88b93a_62f3cef8a3d8e.gif
安装
v1.1.1
npm install react-native-waterfall-flow --save
基本使用
import WaterfallFlow from 'react-native-waterfall-flow'
<WaterfallFlow
data={data}
numColumns={2}
renderItem={({ item, index, columnIndex }) => {
return (
<View>
<Text>index: {index}</Text>
<Text>columnIndex: {columnIndex}</Text>
<View/>
)
}}
...
/>
属性
几乎所有FlatList的属性都是支持的，这里只列出一些常用的属性，其余属性可查看FlatList文档
renderItem
| Type | Required | Description |
|---|---|---|
function |
true | 用于将当前item渲染到列表中 |
-
item(Object): 当前项的数据 -
index(number): 当前项的索引 -
columnIndex(number): 当前项在列表中的第几列
示例用法：
<WaterfallFlow
renderItem={({ item, index, columnIndex }) => {
return (
<View>
<Text>index: {index}</Text>
<Text>columnIndex: {columnIndex}</Text>
<View/>
)
}}
...
/>
如何设置间距
renderItem方法暴露出了columnIndex，该属性表示当前item在列表中第几列，这样你就能够自由的控制每个item的上下左右间距了。item的宽度等于 瀑布流容器的宽度 / numColumns
示例用法：
<WaterfallFlow
renderItem = {({ item, index, columnIndex }) => {
return (
<View
style={{
paddingLeft: columnIndex === 0 ? 12 : 6,
paddingRight: columnIndex === 0 ? 6 : 12,
paddingTop: 3,
paddingBottom: 3
}}
>
<View/>
)
}}
...
/>
data
| Type | Required | Description |
|---|---|---|
array |
true | 瀑布流数据源，可以是任意内容的数组 |
numColumns
| Type | Required | Description |
|---|---|---|
number |
false | 瀑布流的列数，默认为2，即两列 |
ListHeaderComponent
| Type | Required | Description |
|---|---|---|
component, function
|
false | 头部组件。可以是 React Component 或 render 函数。 |
示例用法：
<WaterfallFlow
ListHeaderComponent = {
<View>
<Text>this is header<Text>
<View/>
}
...
/>
ListFooterComponent
| Type | Required | Description |
|---|---|---|
component, function
|
false | 尾部组件。可以是 React Component 或 render 函数。 |
示例用法：
<WaterfallFlow
ListFooterComponent = {
<View>
<Text>this is footer<Text>
<View/>
}
...
/>
ListEmptyComponent
| Type | Required | Description |
|---|---|---|
component, function
|
false | 列表为空时渲染该组件。可以是 React Component 或 render 函数 |
示例用法：
<WaterfallFlow
ListEmptyComponent = {
<View>
<Text>no data here<Text>
<View/>
}
...
/>
onEndReached
(info: {distanceFromEnd: number}) => void
| Type | Required | Description |
|---|---|---|
function |
false | 当列表滚动到底部是调用 |
onRefresh
() => void
| Type | Required | Description |
|---|---|---|
function |
false | 如果设置了此选项，则会在列表头部添加一个标准的RefreshControl 控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。 |
refreshing
| Type | Required | Description |
|---|---|---|
boolean |
false | 在等待加载新数据时将此属性设为 true，列表就会显示出一个正在加载的符号。 |
style
| Type | Required | Description |
|---|---|---|
view styles |
false | 用于设置瀑布流外层样式，默认会有{ flex: 1 }的样式，即高度充满父容器 |
contentContainerStyle
| Type | Required | Description |
|---|---|---|
view styles |
false | 瀑布流内容容器样式 |
建议将其用于设置容器背景色。 示例：
<WaterfallFlow
contentContainerStyle={{ backgroundColor: '#f9f9f9' }}
...
/>
方法
所有和方法和FlatList保持一致，这里只列出几个常用的，其余方法可查看FlatList文档
scrollToEnd()
scrollToEnd([params])
滚动到瀑布流列表的底部
参数：
| Prop | Type | Required |
|---|---|---|
| params | object |
false |
params的参数如下:
- 'animated' (boolean) - 是否有滚动动画. 默认
true.
方法调用示例
绑定ref:
<WaterfallFlow
ref={ref => this.listRef = ref}
...
/>
调用方法:
this.listRef.scrollToEnd()
scrollToIndex()
scrollToIndex([params])
将位于指定位置的元素滚动到可视区的指定位置，当viewPosition 为 0 时将它滚动到屏幕顶部，为 1 时将它滚动到屏幕底部，为 0.5 时将它滚动到屏幕中央。
参数：
| Prop | Type | Required |
|---|---|---|
| params | object |
true |
params的参数如下:
- 'animated' (boolean) - 是否有滚动动画. 默认
true - 'index' (number) - 滚动到指定元素的下标。 必须设置该属性
- 'viewOffset' (number) - 偏移最终目标位置的固定像素数
- 'viewPosition' (number) - 为 0 时将它滚动到屏幕顶部，为 1 时将它滚动到屏幕底部，为 0.5 时将它滚动到屏幕中央
scrollToOffset()
scrollToOffset([params])
滚动列表到指定的偏移（以像素为单位），等同于ScrollView的scrollTo方法。
参数：
| Prop | Type | Required |
|---|---|---|
| params | object |
true |
params的参数如下:
- 'animated' (boolean) - 是否有滚动动画. 默认
true - 'offset' (number) - 要滚动到的偏移量。必须设置该属性
示例
示例代码 是一个expo app, 像这样启动项目
cd examples
npm i
npm start
License
react-native-waterfall-flow is MIT licensed, as found in the LICENSE file.
