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后无须此操作）

1. 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

2. 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')

3. 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:

1. Reset layoutManager for resolving the refresh question (非顶部全局重置数据必须使用)
2. 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 |