Skip to content

Commit

Permalink
Merge pull request #29 from bolan9999/develop
Browse files Browse the repository at this point in the history 
Version 1.1.0
  • Loading branch information
bolan9999 authored Dec 25, 2017
2 parents 0dce6e2 + 1b678e5 commit 8ce4944
Show file tree
Hide file tree
Showing 14 changed files with 1,979 additions and 1,537 deletions.
119 changes: 93 additions & 26 deletions README-cn.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import { LargeList } from "react-native-largelist";
}}
safeMargin={600}
numberOfRowsInSection={section => this.props.numberOfEachSection}
numberOfSections={this.props.numberOfSections}
numberOfSections={()=>this.props.numberOfSections}
heightForCell={(section, row) =>
row % 2 ? this.minCellHeight : this.maxCellHeight}
renderCell={this.renderItem.bind(this)}
Expand Down Expand Up @@ -79,12 +79,12 @@ import { LargeList } from "react-native-largelist"
属性 | 类型 | 默认 |  作用  
------ | ------ | --------- | --------
（ViewPropTypes） | （ViewPropTypes） | | View的所有属性
numberOfSections | number | 1 | 总的Section数量
numberOfSections | ()=>number | ()=>1 | 总的Section数量
numberOfRowsInSection | (section:number) => number | section=>0 | 函数：根据section索引返回当前section的Cell数量
renderCell | (section:number,row:number) => React.Element | 必须 | 函数:根据当前Section和Row，返回当前Cell的render
heightForCell | (section:number,row:number) => number | 必须 | 函数：根据Section和row index，返回当前Cell的高度
renderSection | (section:number) => React.Element | section=>null | 函数：当前Section的render函数
heightForSection | (section:number) => number | 0 | 函数：返回当前section的高度
heightForSection | (section:number) => number | ()=>0 | 函数：返回当前section的高度
renderHeader | () => React.Element | ()=>null | 函数：列表的头部组件的render函数
renderFooter | () => React.Element | ()=>null | 函数：列表的尾部组件的render函数
bounces | boolean | true | 组件滑动到边缘是否可以继续滑动，松开后弹回
Expand All @@ -107,27 +107,80 @@ onScroll | ({nativeEvent:{contentOffset:{x:number,y:number}}})=> any | | 滑动

# 高级属性

### safeMargin ( type:number ,default: 600)
上下额外的预渲染高度，值越大在快速滑动过程中越不容易看到空白，但是第一次加载的时间越长
### dynamicMargin (type:number,default: 500)
在快速滑动过程中，允许上下端相互借用的预渲染高度。比如假设safeMargin=600，dynamicMargin=500，在快速下滑过程中，上端只额外渲染100高度，下端额外渲染1100高度，反之亦然。 在慢速滑动过程中该属性无作用。请注意：该属性不能大于safeMargin
### scrollEventThrottle (type: number ,default: ios:16 android:32)
同ScrollView的scrollEventThrottle，滑动过程中，onScroll回调时间最小间隔，值越小，相同的滑动追踪次数越多，越不容易出现空白，性能越差。
### onIndexPathDidEnterSafeArea (type:(indexPath:IndexPath)=>any)
当一个indexPath进入SafeArea时回调
### onIndexPathDidLeaveSafeArea (type:(indexPath:IndexPath)=>any)
当一个indexPath离开SafeArea时回调
### showsVerticalScrollIndicator (type:bool,default:true)
显示垂直滚动指示器
### onSectionDidHangOnTop (type:section=>any, default: ()=>{})
当一个新的Section被挂在LargeList顶部时的回调
### speedLevel1 (type:number, default:4)
当滑动的速度超过这个speedLevel1，LargeList则不会rerender，仅仅只是移动位置。 单位是 每毫秒移动的逻辑像素量。
### speedLevel2 (type:number, default:10)
当前版本无意义
### nativeOptimize (type:bool, default: false)
启用原生优化，iOS专用。这是一个实验性的功能，使用该功能以后，safeArea就没有意义了。要使用改功能，请将"${YourProject}/node_modules/react-native-largelist/ios/STTVTableView.xcodeproj"拖入您的iOS项目，并且保证链接了它

### safeMargin
* type: number
* default: 600
* 上下额外的预渲染高度，值越大在快速滑动过程中越不容易看到空白，但是第一次加载的时间越长

### dynamicMargin
* type: number
* default: 500
* 在快速滑动过程中，允许上下端相互借用的预渲染高度。比如假设safeMargin=600，dynamicMargin=500，在快速下滑过程中，上端只额外渲染100高度，下端额外渲染1100高度，反之亦然。 在慢速滑动过程中该属性无作用。请注意：该属性不能大于safeMargin

### scrollEventThrottle
* type: number
* default: ios:16
* 同ScrollView的scrollEventThrottle，滑动过程中，onScroll回调时间最小间隔，值越小，相同的滑动追踪次数越多，越不容易出现空白，性能越差。

### onIndexPathDidEnterSafeArea
* type: (indexPath:IndexPath)=>any
* default: ()=>null
* 当一个indexPath进入SafeArea时回调

### onIndexPathDidLeaveSafeArea
* type: (indexPath:IndexPath)=>any
* default: ()=>null
* 当一个indexPath离开SafeArea时回调

### showsVerticalScrollIndicator
* type: bool
* default: true
* 显示垂直滚动指示器

### onSectionDidHangOnTop
* type: section=>any
* default: ()=>null
* 当一个新的Section被挂在LargeList顶部时的回调

### speedLevel1
* type: number
* default: 4
* 当滑动的速度超过这个speedLevel1，LargeList则不会rerender，仅仅只是移动位置。 单位是 每毫秒移动的逻辑像素量。

### speedLevel2
* type: number
* default: 10
* 当前版本无意义

### nativeOptimize
* type: bool
* default: false
* 启用原生优化，iOS专用。这是一个实验性的功能，使用该功能以后，safeArea就没有意义了。要使用改功能，请将"${YourProject}/node_modules/react-native-largelist/ios/STTVTableView.xcodeproj"拖入您的iOS项目，并且保证链接了它

### onLoadMore
* type: ()=>any
* default: null
* 上拉加载更多的回调，如果设置了此属性，则在下面会有一个上拉的控件

### heightForLoadMore
* type: ()=>number
* default: ()=>70
* 上拉控件的高度

### allLoadCompleted
* type: bool
* default: false
* 数据源是否全部加载完成

### renderLoadingMore
* type: ()=>React.Element
* default: ()=> < ActivityIndicator style={{ marginTop: 10, alignSelf: "center" }} size={"large"}/ >
* 用户自定义上拉加载更多的动画视图，目前暂不支持事件驱动动画

### renderLoadCompleted
* type: ()=>React.Element
* default: ()=> < Text style={{ marginTop: 20, alignSelf: "center", fontSize: 16 }}>No more data< /Text >
* 用户自定义上拉时，加载完成的动画视图。

# 方法
### scrollTo(offset:Offset, animated:boolean=true)
Expand All @@ -136,7 +189,7 @@ onScroll | ({nativeEvent:{contentOffset:{x:number,y:number}}})=> any | | 滑动
滑动到一个指定的IndexPath:{section:number,row:number}
### scrollToEnd(animated:boolean=true)
滑动到最底部
### visiableIndexPaths():IndexPath[]
### visibleIndexPaths():IndexPath[]
获取当前可见的所有IndexPaths
### renderedIndexPaths():IndexPath[]
获取当前已经渲染好的所有IndexPaths
Expand Down Expand Up @@ -183,6 +236,20 @@ onScroll | ({nativeEvent:{contentOffset:{x:number,y:number}}})=> any | | 滑动

## 目标计划
1. 修正细节问题
2. 提供编辑功能
2. 提供左右滑动编辑功能
3. 代码优化，支持TypeScript类型检查


# 更新日志

### 版本 1.1.0
* 添加上拉加载更多
* 修复reloadData有时候出现问题
* 修复scrollTo几个方法，如果动画为false，会出现bug的问题
* 将 "visiableIndexPaths" 修改为 "visibleIndexPaths", "visiableIndexPaths" 将在2.0.0版本后完全不支持
* "numberOfSections"的类型由number改变为function, number 将在2.0.0版本后完全不支持

### Version 1.0.0
* release


121 changes: 96 additions & 25 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ import { LargeList } from "react-native-largelist";
}}
safeMargin={600}
numberOfRowsInSection={section => this.props.numberOfEachSection}
numberOfSections={this.props.numberOfSections}
numberOfSections={()=>this.props.numberOfSections}
heightForCell={(section, row) =>
row % 2 ? this.minCellHeight : this.maxCellHeight}
renderCell={this.renderItem.bind(this)}
Expand Down Expand Up @@ -86,12 +86,12 @@ Props:
Props | type | default |  effect  
------ | ------ | --------- | --------
（ViewPropTypes） | （ViewPropTypes） | | All props of View
numberOfSections | number | 1 | number of sections in tableview
numberOfSections | ()=>number | ()=>1 | number of sections in tableview
numberOfRowsInSection | (section:number) => number | section=>0 | function：return the number of rows in section
renderCell | (section:number,row:number) => React.Element | required | function: render of cell with section and row index
heightForCell | (section:number,row:number) => number | required | function：return height for cell with section and row index
renderSection | (section:number) => React.Element | section=>null | function：render of section with section index
heightForSection | (section:number) => number | 0 | function：return height of section with section index
heightForSection | (section:number) => number | ()=>0 | function：return height of section with section index
renderHeader | () => React.Element | ()=>null | function：render of header in the tableview
renderFooter | () => React.Element | ()=>null | function：render of footer in tableview
bounces | boolean | true | bounces
Expand All @@ -111,33 +111,87 @@ Look up the design of react-native-largelist:
![](./readme_resources/largelist_advanced_usage.png)

# Advanced Usage
### safeMargin ( type:number ,default: 600)
The height of rendering children out side of visiable area. The greater the value is, the less easily you see the blank in the fast sliding process, but the longer the first time it is loaded
### dynamicMargin (type:number,default: 500)
The height of dynamic safe margin when sliding too fast. For example, if safeMargin=600 and dynamicMargin=500, it will render 100 height on top and 1100 height on bottom out side of the visiable area when sliding down too fast.
### safeMargin
* type: number
* default: 600
* The height of rendering children out side of visible area. The greater the value is, the less easily you see the blank in the fast sliding process, but the longer the first time it is loaded

### dynamicMargin
* type: number
* default: 500
* The height of dynamic safe margin when sliding too fast. For example, if safeMargin=600 and dynamicMargin=500, it will render 100 height on top and 1100 height on bottom out side of the visible area when sliding down too fast.

Notice:

1. It does not work when the speed of sliding is slow.
2. It can not be set larger than safeMargin


### scrollEventThrottle (type: number ,default: ios:16 android:32)
It is the same as scrollEventThrottle on ScrollView
### onIndexPathDidEnterSafeArea (type:(indexPath:IndexPath)=>any)
The callback when an indexpath did enter safeArea.
### onIndexPathDidLeaveSafeArea (type:(indexPath:IndexPath)=>any)
The callback when an indexpath did leave safeArea.
### showsVerticalScrollIndicator (type:bool,default:true)
Show vertical scroll indicator.
### onSectionDidHangOnTop (type:section=>any, default: ()=>{})
The callback when a new Section hang on the top of the LargeList.
### speedLevel1 (type:number, default:4)
If the speed of scrolling is faster than speedLevel1, LargeList will not rerender, just use "setNativeProps" to move the position. Unit is logic pixels/ms.
### speedLevel2 (type:number, default:10)
It does not work for the current version.
### nativeOptimize (type:bool, default: false)
Use native optimize, iOS only. This is an experimental prop.If it is set, safeArea doesn't make sense. To use the prop, you should add "${YourProject}/node_modules/react-native-largelist/ios/STTVTableView.xcodeproj" to your iOS project. And make sure link it.
### scrollEventThrottle
* type: number
* default: ios:16
* It is the same as scrollEventThrottle on ScrollView

### onIndexPathDidEnterSafeArea
* type: (indexPath:IndexPath)=>any
* default: ()=>null
* The callback when an indexpath did enter safeArea.

### onIndexPathDidLeaveSafeArea
* type: (indexPath:IndexPath)=>any
* default: ()=>null
* The callback when an indexpath did leave safeArea.

### showsVerticalScrollIndicator
* type: bool
* default: true
* Show vertical scroll indicator.

### onSectionDidHangOnTop
* type: section=>any
* default: ()=>null
* The callback when a new Section hang on the top of the LargeList.

### speedLevel1
* type: number
* default: 4
* If the speed of scrolling is faster than speedLevel1, LargeList will not rerender, just use "setNativeProps" to move the position. Unit is logic pixels/ms.

### speedLevel2
* type: number
* default: 10
* It does not work for the current version.

### nativeOptimize
* type: bool
* default: false
* Use native optimize, iOS only. This is an experimental prop.If it is set, safeArea doesn't make sense. To use the prop, you should add "${YourProject}/node_modules/react-native-largelist/ios/STTVTableView.xcodeproj" to your iOS project. And make sure link it.

### onLoadMore
* type: ()=>any
* default: null
* The callback when pull up on the bottom

### heightForLoadMore
* type: ()=>number
* default: ()=>70
* function: return the height of Loading More View.

### allLoadCompleted
* type: bool
* default: false
* Did all data source load completed?

### renderLoadingMore
* type: ()=>React.Element
* default: ()=> < ActivityIndicator style={{ marginTop: 10, alignSelf: "center" }} size={"large"}/ >
* The render of custom Loading More View

### renderLoadCompleted
* type: ()=>React.Element
* default: ()=> < Text style={{ marginTop: 20, alignSelf: "center", fontSize: 16 }}>No more data< /Text >
* The render of custom Loading Completed View.


# Method
### scrollTo(offset:Offset, animated:boolean=true)
Expand All @@ -146,8 +200,8 @@ Scroll to offset.
Scroll to an indexpath.
### scrollToEnd(animated:boolean=true)
Scroll to the end of the LargeList.
### visiableIndexPaths():IndexPath[]
Get the visiable indexpaths at this time.
### visibleIndexPaths():IndexPath[]
Get the visible indexpaths at this time.
### renderedIndexPaths():IndexPath[]
Get the rendered indexpaths at this time.
### freeCount(): number
Expand Down Expand Up @@ -191,3 +245,20 @@ Get LargeList's header height
### footerHeight:number
Get LargeList's footer height

### Goals and plans
* Fix bug
* Left and right swipe out to edit cell.
* Code optimization， support typescript.

# Update Log

### Version 1.1.0
* Add loading more
* Fix bug when reload data
* Fix bug on "scrollTo" when animated == false
* Change "visiableIndexPaths" to "visibleIndexPaths", "visiableIndexPaths" will not support after 2.0.0
* Change the type of "numberOfSections" from number to function, number will not support after 2.0.0

### Version 1.0.0
* release

Loading

0 comments on commit 8ce4944

Please sign in to comment.