react-native-waterfall-layout
基于react-native官方組件封裝的瀑布流組件
Preview
Getting started
1.安裝
$ npm i?react-native-waterfall-layout --save
2.導(dǎo)入
import Waterfall from 'react-native-waterfall-layout';
Properties
Prop? ? ? ? ? ? ? ? Default? ? ? ? ? ?Type? ? ? ? ? ? ? ? Description
columns? ? ? ? ? ? ?2? ? ? ? ? ? ? ? ?Number? ? ? ? ? ?瀑布流的列數(shù)
space? ? ? ? ? ? ? ? 10? ? ? ? ? ? ? ? Number? ? ? ? ? ?瀑布流每列之間的間隔
renderItem? ? ? ? null? ? ? ? ? ? ? Function? ? ? ? ? 用于自定義瀑布流中每一項(xiàng)的內(nèi)容
keyExtractor? ? ?null? ? ? ? ? ? ? ?Function? ? ? ? ? 為給定的item生成一個不重復(fù)的key昧廷。若不指定此函數(shù)恨闪，則默認(rèn)抽取item.key作為key值。若item.key也不存在绞绒，則使用數(shù)組下標(biāo)index
refresh? ? ? ? ? ? ?true? ? ? ? ? ? ? ?Boolean? ? ? ? ?是否啟用下拉刷新
refreshing? ? ? ? (done) =>{}? ? Function? ? ? ? 下拉刷新觸發(fā)該函數(shù)回铛，接收一個done函數(shù)用于結(jié)束刷新
refreshConf? ? ? ? ? ? ? ? ? ? ? ? ? ? Object? 下拉刷新參數(shù)，配置詳見RefreshControl
infinite? ? ? ? ? ? ? true? ? ? ? ? ? ? ? Boolean? ? ? ? 是否啟用滾動加載
infiniting? ? ? ? ? (done) => {}? ? Function? ? ? ? 滾動到列表底部觸發(fā)該函數(shù)，接收參數(shù)同refreshing
hasMore? ? ? ? ? ?true? ? ? ? ? ? ? ?Boolean? ? ? ? 設(shè)置為false滾動到列表底部后將不觸發(fā)infiniting
renderInfinite? ? ? ? ? ? ? ? ? ? ? ? ?Function? ? ? ?用于自定義滾動加載組件及樣式,接收一個loading用于判斷是否正在加載
Methods
addItems
添加Items到瀑布流中，其中Item的高度自動計(jì)算出來翅萤，將Item添加到最矮的列中，所以會導(dǎo)致Items依次渲染腊满。
this.refs.waterfall.addItems([
? ? {name: 'Item1'},?
? ? {name: 'Item2'}
])
addItemWithHeight
添加 items 到瀑布流組件中，item的高度也將自動確定培己，但需要在每個item對象的數(shù)據(jù)中添加height屬性碳蛋，該屬性不是item渲染后的實(shí)際高度，而是作為item分配列的算法參考值省咨。和addItems不一樣的是肃弟，是批量渲染的
this.refs.waterfall.addItemsWithHeight([
? ? ? {name:"Item1", height: 210 },
? ? ? {name:"Item2", height: 150 }
]);
clear
清除瀑布流中的所有項(xiàng)
this.refs.waterfall.clear();
Example
點(diǎn)擊Demo查看示例
