react-native-waterfall-layout
基于react-native官方组件封装的瀑布流组件
Preview
iOS
Android
Getting started
1.安装
$ npm i react-native-waterfall-layout --save
2.导入
import Waterfall from 'react-native-waterfall-layout';
Properties
| Prop | Default | Type | Description |
|---|---|---|---|
| columns | 2 | Number | 瀑布流的列数 |
| space | 10 | Number | 瀑布流每列之间的间隔 |
| renderIte | null | Function | 用于自定义瀑布流中每一项的内容 |
| keyExtractor | null | Function | 为给定的item生成一个不重复的key。若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使用数组下标index |
| refresh | true | Boolean | 是否启用下拉刷新 |
| refreshing | (done) =>{} | Function | 下拉刷新触发该函数，接收一个done函数用于结束刷新 |
| refreshConf | Object | 下拉刷新参数，配置详见RefreshControl | |
| infinite | true | Boolean | 是否启用滚动加载 |
| infiniting | (done) => {} | Function | 滚动到列表底部触发该函数，接收参数同refreshing |
| hasMore | true | Boolean | 设置为false滚动到列表底部后将不触发infiniting |
| renderInfinite | Function | 用于自定义滚动加载组件及样式,接收一个loading用于判断是否正在加载 |
Methods
addItems
添加Items到瀑布流中，其中Item的高度自动计算出来，将Item添加到最矮的列中，所以会导致Items依次渲染。
this.refs.waterfall.addItems([
{name: 'Item1'},
{name: 'Item2'}
])
addItemWithHeight
添加 items 到瀑布流组件中，item的高度也将自动确定，但需要在每个item对象的数据中添加height属性，该属性不是item渲染后的实际高度，而是作为item分配列的算法参考值。和addItems不一样的是，是批量渲染的
this.refs.waterfall.addItemsWithHeight([
{name:"Item1", height: 210 },
{name:"Item2", height: 150 }
]);
clear
清除瀑布流中的所有项
this.refs.waterfall.clear();
Example
点击Demo查看