0.0.13 • Published 5 years ago
@ks-stack/react-native-recyclerview
Licence
—
Version
0.0.13
Deps
0
Size
62 kB
Vulns
0
Weekly
0
react-native-recyclerview
一个纯react-native实现的滚动列表，借鉴于react-native-largelist和recyclerlistview，更少的预渲染数量，更流畅的滚动表现。底层使用react-native自带的ScrollView，没有额外原生依赖
Demerits
必须提前传入列表元素的高度(横向滚动时为宽度)
Todo
- 刷新头
- 粘性item
Getting started
$ yarn add @ks-stack/react-native-recyclerview
Usage
参考example文件夹
Props
理论上兼容除contentContainerStyle的全部ScrollView的属性，以下为新增属性
| Prop name | Description | Type | Default value | Required |
|---|---|---|---|---|
countForItem |
列表元素的总数量 | number | none | true |
renderForItem |
列表元素的渲染方法 | funtion | none | true |
heightForItem |
列表元素的高度(横向滚动时为宽度)，传入数值时采用react-native-largelist的模式，传入方法时采用recyclerlistview的模式 |
funtion | number | none | true |
numColumns |
同FlatList | number | 1 | false |
renderForHeader |
列表头部的渲染方法，注意头部不会复用，会一直存在 | funtion | none | false |
heightForHeader |
列表头部的高度 | number | none | false |
renderForFooter |
列表尾部的渲染方法，注意尾部不会复用，会一直存在 | funtion | none | false |
heightForFooter |
列表尾部的高度 | number | none | false |
ListEmptyComponent |
列表为空时渲染的组件 | funtion | component | none | false |
preOffset |
预渲染的偏移量，增大该数值可减少图片渲染慢的白屏几率 | number | ios200，安卓800，因为glide渲染图片实在太慢了 | false |
onEndReachedThreshold |
同FlatList | number | 1 | false |
onEndReached |
同FlatList | funtion | none | false |
onVisibleItemsChange |
同FlatList | funtion | none | false |
Methods
| Method name | Description |
|---|---|
scrollTo |
同ScrollView |
scrollToEnd |
同ScrollView |
flashScrollIndicators |
同ScrollView |
Run the example app
Make sure to have an emulator running or an Android device connected, and then:
$ glit clone https://github.com/ks-stack/react-native-recyclerview.git
$ yarn
$ cd ios && pod install && cd ..
$ react-native run-ios
$ react-native run-android