Skip to content

Commit 280a878

Browse files
ATShiTouATShiTou
committed
3.0.11
1. 文档完善 2. 修正inverted时，安卓API 28以上设备滑动回弹方向错误的问题。 3. 修正在react-native0.59安卓API 28上崩溃的问题
1 parent 2752c25 commit 280a878

File tree

8 files changed

+98
-11
lines changed

8 files changed

+98
-11
lines changed

‎docs/en/V3/Overview.md‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ As the same as SpringScrollView，LargeList must have a bounded height in order
99
Props | Type | Default |  Description  
1010
---- | ------ | --------- | --------
1111
[...SpringScrollView](https://bolan9999.github.io/react-native-spring-scrollview/#/) | - | - | Support almost all props in SpringScrollView
12-
data | { items: any[] }[] | required | The data source of the large list.
12+
data | { items: any[] }[] | required | The data source of the large list. The outer array is the number of sections. And the inner array:`items` is the items of the section.
1313
contentStyle | ViewStyle | { height } | The content view style of LargeList.
1414
heightForSection | (section: number) => number | ()=>0 | The height function for every Section
1515
renderSection | (section: number) => React.ReactElement <any> | ()=>null | The render function for every Section
@@ -37,3 +37,32 @@ renderScaleHeaderBackground | ()=> React.ReactElement <any> | undefined | Ren
3737

3838
### Precautions
3939
* LargeList default has a `{flex:1}` style，please be sure its parent has abounded height.
40+
* In V3, in order to maximize performance optimization, reduce the number of dom nodes, LargeList will slice the `renderHeader`,`renderFooter` and `renderIndexPath` and add some additional styles and `onLayout` prop to the root node. I think it is worth. If your items looks messy. If your Item is a single `Text`,`TextInput` or `Switch` component ,please wrapper it with a `View` , `TouchableOpacity`, `TouchableHighlight` or other.
41+
```
42+
renderIndexPath = ({ section, row }) => (
43+
return <View><Text>{...}</Text></View>
44+
)
45+
```
46+
47+
* If your item has a vertical margin(marginTop or marginBottom)， You should also wrapper it with a `View` , `TouchableOpacity`, `TouchableHighlight` or other.
48+
```
49+
renderIndexPath = ({ section, row }) => (
50+
return <View>
51+
<TouchableOpacity style={{margin:10}}>
52+
{...}
53+
</TouchableOpacity>
54+
</View>
55+
)
56+
```
57+
58+
* If you want to return a customized component. You should always pass down the style prop that the <CustomizedComponent /> receives.
59+
```
60+
const CustomizedComponent = (props) => <TouchableHighlight style={StyleSheet.flatten([this.props.style,{your customized style}])} {...other props}>{some info...}</TouchableHighlight>;
61+
...
62+
renderIndexPath = ({ section, row }) => (
63+
<CustomizedComponent />
64+
)
65+
```
66+
67+
Check out [this issue](https://github.com/bolan9999/react-native-largelist/issues/260) for more detail.
68+

‎docs/zh-cn/V3/Overview.md‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ LargeList V3 依赖 `react-native-spring-scrollview@^2.0.3`, 支持SpringScrollV
99
属性 | 类型 | 默认值 |  描述  
1010
---- | ------ | --------- | --------
1111
[...SpringScrollView](https://bolan9999.github.io/react-native-spring-scrollview/#/) | - | - | 支持SpringScrollView几乎所有属性
12-
data | { items: any[] }[] | 必需 | 列表的数据源
12+
data | { items: any[] }[] | 必需 | 列表的数据源,外层数组表示吸顶Section的数量，内层的items数组表示每个Section下有多少个Items。
1313
contentStyle | ViewStyle | { height } | LargeList的content view样式
1414
heightForSection | (section: number) => number | ()=>0 | 返回列表每一组组头高度的函数
1515
renderSection | (section: number) => React.ReactElement &lt;any> | ()=>null | 每一组组头的render函数
@@ -34,4 +34,31 @@ inverted | boolean | false | 翻转滚动方向，适配聊天App，查看示例
3434

3535
### 注意事项
3636
* LargeList默认具有{flex:1}的样式，因此要使LargeList正常工作，它的父容器必须是确定高度的，你也可以通过手动指定样式，使之正常工作。
37-
* 在V3中，为了最大化优化性能，减少DOM节点数量, `renderIndexPath`、 `renderHeader` 、 `renderFooter` 的直系节点在内部都进行了切片重新装配操作，所以不要直接返回`Text`,`TextInput`,`Switch`等这类宽高样式不符合CSS规范的组件，推荐使用`View`或`TouchableOpacity`等组件包装一层。还有就是，他们本身已经具备正确的样式，不再建议使用`flex：1`。虽然您使用了也不会有什么问题。而`renderSection` 由于没有切片重新装配，则必须拥有`flex:1`样式，不然可能无法占满整个组头。
37+
* 在V3中，为了最大化优化性能，减少DOM节点数量, `renderIndexPath`、 `renderHeader` 、 `renderFooter` 的直系节点在内部都进行了切片重新装配操作，会增加一些style和onLayout属性进入您的直系节点。所以不要直接返回`Text`,`TextInput`,`Switch`等这类宽高样式不符合CSS规范的组件，推荐使用`View`或`TouchableOpacity`等组件包装一层。还有就是，他们本身已经具备正确的样式，不再建议使用`flex：1`。虽然您使用了也不会有什么问题。而`renderSection` 由于没有切片重新装配，则必须拥有`flex:1`样式，不然可能无法占满整个组头。
38+
```
39+
renderIndexPath = ({ section, row }) => (
40+
return <View><Text>{...}</Text></View>
41+
)
42+
```
43+
* 如果你的Item在垂直方向上有margin， 你也应该是对外层进行一下包装：
44+
```
45+
renderIndexPath = ({ section, row }) => (
46+
return <View>
47+
<TouchableOpacity style={{margin:10}}>
48+
{...}
49+
</TouchableOpacity>
50+
</View>
51+
)
52+
```
53+
54+
55+
* 如果你返回的是一个自定义的节点，请务必把直系节点的style传到一个真实的原生节点上.
56+
```
57+
const CustomizedComponent = (props) => <TouchableHighlight style={StyleSheet.flatten([this.props.style,{your customized style}])} {...other props}>{some info...}</TouchableHighlight>;
58+
...
59+
renderIndexPath = ({ section, row }) => (
60+
<CustomizedComponent />
61+
)
62+
```
63+
64+
更多信息可查看 [这个问题](https://github.com/bolan9999/react-native-largelist/issues/260)

‎docs/zh-cn/V3/StickyForm/Overview.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Overview
2+
`StickyForm`是一个支持水平垂直双吸边的组件。它会把`renderHeader`,`renderSection`,`renderIndexPath`,`renderFooter`返回的element的子节点切片，并且让他们的第一个节点自动吸住左边。 配合LargeList的headerStickyEnabled，可以把头部吸在列表的顶部，然后把Section吸在头部的下面。具体示例见下面动图：
3+
4+
### 预览
5+
6+
![StickyFormExample](../../../res/StickyFormExample.gif)

‎docs/zh-cn/V3/StickyForm/Usage.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Usage
2+
3+
属性 | 类型 | 默认值 | 描述  
4+
---- | ------ | --------- | --------
5+
...LargeList | - | - | 支持所有的LargeList属性（含刷新及加载）。
6+
directionalLockEnabled | boolean | true | 当此属性为true时，它会试着锁定只在水平或垂直一个方向上滚动。
7+
headerStickyEnabled | boolean | true | 将头部吸在StickForm的顶部，Section跟着吸在头部的下边。
8+
9+
10+
### Precautions
11+
它会把`renderHeader`,`renderSection`,`renderIndexPath`,`renderFooter`返回节点的子节点切片，并且让他们的第一个节点自动吸住左边。 配合LargeList的headerStickyEnabled，可以把头部吸在列表的顶部，然后把Section吸在头部的下面。. 具体可以查看示例 [StickyFormExample](https://github.com/bolan9999/react-native-largelist/blob/master/Examples/StickyFormExamples/StickyFormExample.js) .
12+

‎docs/zh-cn/V3/WaterfallList/Overview.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
# 概述
2-
WaterfallList是一个高性能的瀑布流列表，它继承了SpringScrollView的跨平台弹性功能，刷新与加载功能。同时继承了LargeList的高性能性（无白板）。请注意，为了优化性能，每个Item的高度是需要给出的。
1+
# Overview
2+
`WaterfallList`是一个高性能的瀑布流列表，它继承了SpringScrollView的跨平台弹性功能，刷新与加载功能。同时继承了LargeList的高性能性（无白板）。请注意，为了优化性能，每个Item的高度是需要给出的。
33

44
### 预览
55
![WaterfallExample](../../../res/WaterfallExample.png)

‎docs/zh-cn/V3/WaterfallList/Usage.md‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1-
# 基本用法
1+
# Usage
2+
3+
Props | Type | Default |  Description  
4+
---- | ------ | --------- | --------
5+
[...SpringScrollView](https://bolan9999.github.io/react-native-spring-scrollview/#/) | - | - | 支持几乎所有SpringScrollView的属性（包含自定义刷新及自定义加载）。
6+
data | any[] | required | 数据源，数组的个数决定了Item的数量
7+
heightForItem | (item:any,index:number)=> number | 必需 | 一个高度函数，用以返回每个Item的高度
8+
renderItem | (item:any,index:number)=> React.ReactElement&lt;any> | 必需 | 每个Item的render函数
9+
preferColumnWidth | number | undefined | 每个Item的理想宽度， 它会影响实际列数，实际列数等于WaterfallList除以理想宽度向下取整，实际宽度是组件宽度除以实际列数（目前只支持等宽的Item）.(`preferColumnWidth` 和 `numColumns` 至少需要指定一个. )
10+
numColumns | number | undefined | 固定列数. (`preferColumnWidth` 和 `numColumns` 至少需要指定一个. )
11+
renderHeader | ()=> React.ReactElement &lt;any> | undefined | 头部组件函数
12+
renderFooter | ()=> React.ReactElement &lt;any> | undefined | 尾部组件函数
213

3-
<!--对不起，这是收费的，请联系 `[email protected]`-->

‎docs/zh-cn/_sidebar.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@
1111
* [滑动 & 监听滑动](zh-cn/V3/Scroll)
1212
* [所有支持属性列表](zh-cn/V3/SupportedProps)
1313
* [已知问题](zh-cn/V3/KnownIssues)
14-
<!--* WaterfallList-->
15-
<!--* [概述](zh-cn/V3/WaterfallList/Overview)-->
16-
<!--* [基本用法](zh-cn/V3/WaterfallList/Usage)-->
14+
* WaterfallList
15+
* [概述](zh-cn/V3/WaterfallList/Overview)
16+
* [基本用法](zh-cn/V3/WaterfallList/Usage)
17+
* StickyForm
18+
* [概述](zh-cn/V3/StickyForm/Overview)
19+
* [基本用法](zh-cn/V3/StickyForm/Usage)
1720
* 注意事项

‎src/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-largelist-v3",
3-
"version": "3.0.10",
3+
"version": "3.0.11",
44
"private": false,
55
"description": "The best performance large list component which is much better than SectionList for React Native.",
66
"author": "bolan9999 <[email protected]>",

0 commit comments

Comments
 (0)