React-native-rnrecyclerviews NPM

react-native-rnrecyclerviews

使用Android原生RecyclerView实现。
列表内容由React Native项目自行决定，故不对外提供item点击事件。
提供滑动到顶、底及任意position回调
version 1.1.8 后提供吸顶布局，使用Android Material Design CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout

Getting started

"react-native-rnrecyclerviews": "https://develop.dianpings.com/gitlab/frontend/FtWaterFall_Android.git" $ npm install react-native-rnrecyclerviews

Manually install only for Android project（npm install后无须此操作）

Open up android/app/src/main/java/[...]/MainApplication.java

Add import com.library.rnrecyclerview.RNRnrecyclerviewPackage; to the imports at the top of the file
Add new RNRnrecyclerviewPackage() to the list returned by the getPackages() method

Append the following lines to android/settings.gradle:

include ':react-native-rnrecyclerviews'
project(':react-native-rnrecyclerviews').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-rnrecyclerviews/android')

Insert the following lines inside the dependencies block in android/app/build.gradle:
```
  compile project(':react-native-rnrecyclerviews')
```

Usage

Look at the use case RNRecyclerViewTest

RNRecyclerView Props

Prop name	Description	Type	Default	Example
`layoutType`	1.设置LayoutManager(必传)2.设置spanCount3.设置loadMore回调条目数	array	必传	1.线性布局{0}、{0,4}2.网格布局{1,2}、{1,2,4}3.瀑布流{2,2}、{2,2,4}
`dataSource`	The datasource that contains the data to render	DataSource
`renderItem`	需要渲染的item	component
`inverted`	inverted the list	bool
`ListHeaderComponent`	Component to render as header 瀑布流不要使用	component	none
`ListFooterComponent`	Component to render as footer 瀑布流不要使用	component	none
`ListEmptyComponent`	Component to render in case of no items 空布局	component	none
`onBottom`	列表滑动到底回调	function
`onLoadMore`	加载更多回调，可用于提前n条数据开始回调（layoutType最后一个参数设置n）	function
`onTop`	滑动到顶回调	function

Methods

`Method name`	Params	Description
`scrollToIndex`	`{ index, animated, velocity, viewPosition, viewOffset }`	Scroll the list to the `index` item such that it is positioned in the viewable area such that `viewPosition` 0 places it at the top, 1 at the bottom, and 0.5 centered in the middle. `viewOffset` is a fixed number of pixels to offset the final target position. It can be `animated`. `velocity` is the amount of milliseconds per inch.
`scrollToEnd`	`{ animated, velocity }`	Scroll to the end of the list. It can be `animated`. `velocity` is the amount of milliseconds per inch.
`scrollToTop`	`{ animated, velocity }`	Scroll to the top of the list. It can be `animated`. `velocity` is the amount of milliseconds per inch.
`setLayoutManager`	`layoutType`	Reset layoutManager for resolving the refresh question
`setReverse`	`inverted`	inverted the list

DataSource

It wraps your array, giving you some useful methods to update the data.

Methods

Method name	Params	Description
`push`	item	Add an item to the end of the array
`unshift`	item	Add an item to the beginning of the array
`splice`	index,deleteCount,...items	Equals to `Array.prototype.splice`
`set`	index, item	Set the item at the specified index
`get`	index	Returns the item at the specified index
`size`		Returns the length of the array
`setDirty`		Forces the RecyclerViewList to render again the visible items
`moveUp`	index	Move the item up of 1 position
`moveDown`	index	Move the item down of 1 position

note:

Reset layoutManager for resolving the refresh question (非顶部全局重置数据必须使用)
See RNRecyclerViewTest.js.reset()

Thanks for react-native-recyclerview-list-android

see @https://www.npmjs.com/package/react-native-recyclerview-list-android

Version 1.1.8

新增吸顶布局CollapsedView，结合RNRecyclerView使用
Look at the use case CollapsedViewTest
CollapsedView Props

Prop name	Description	Type	Default
`CollapseComponent`	需要折叠布局	component	必传
`StableComponent`	吸顶固定布局	component	必传
`NormalComponent`	列表布局	component	必传
`onCollapsedState`	折叠状态回调(0、1、2) 0：展开状态 1：吸顶状态 2：中间状态	function	none