Skip to content

Commit d9fd181

Browse files
bolan9999bolan9999
committed
完成V3.0.1-rc.2
完成文档
1 parent 309d6b5 commit d9fd181

29 files changed

+1718
-40
lines changed

‎README.md

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,31 @@
1+
<!--
2+
* @Author: 石破天惊
3+
* @email: shanshang130@gmail.com
4+
* @Date: 2020-11-05 10:44:46
5+
* @LastEditTime: 2021-07-23 23:42:43
6+
* @LastEditors: 石破天惊
7+
* @Description:
8+
-->
19
**React Native Spring ScrollView**！
210

3-
**React Native Spring ScrollView V2** is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android) It is easy to support pulling to refresh and dragging to load more data.
4-
It is bridged from Native in V2，and resolve a big problem in V1 when Javascript thread is stuck.
11+
**React Native Spring ScrollView** is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android) It is easy to support pulling to refresh and dragging to load more data. It is bridged from Native after V2.
512

613
### Features
714

815
* High performance cross-platform native bounces ScrollView (iOS & Android)
916
* Simultaneous gesture on both horizontal and vertical directions.
1017
* Smoothly scroll
11-
* Highly customizing refreshing and loading animation. Fully support `react-native-lottie`. More smoothly animation.
12-
* Scroll to any position
18+
* Highly customizing refreshing and loading animation. Fully support `react-native-lottie` process with `useNativeDriver`.
19+
* Solved the common problem of views that need to move out of the way of the virtual keyboard.
1320
* Native onScroll contentOffset on both horizontal and vertical directions
14-
* Support initialing content offset.
1521
* Resolved no response with onRefresh and onLoading in some special case.
22+
* PagingEnabled on both horizontal and vertical directions.(<font color=red>New</font>)
23+
* Nested self like iOS. (<font color=red>New</font>)
1624

1725
### Documentation
1826
Check out our dedicated documentation page for info about this library, API reference and more:
1927
[Documentation Reference](https://bolan9999.github.io/react-native-spring-scrollview/#/)
2028

2129

2230
### Preview
23-
![Refreshing](./docs/res/LottieRefreshing.gif)
24-
![Loading](./docs/res/LottieLoading.gif)
31+
![Preview](./docs/res/android-test.gif)

‎docs/en/README.md

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
1-
### **React Native Spring ScrollView**！
1+
<!--
2+
* @Author: 石破天惊
3+
* @email: shanshang130@gmail.com
4+
* @Date: 2020-11-05 10:44:46
5+
* @LastEditTime: 2021-07-23 23:49:00
6+
* @LastEditors: 石破天惊
7+
* @Description:
8+
-->
9+
**React Native Spring ScrollView**！
210

3-
**React Native Spring ScrollView V2** is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android) It is easy to support pulling to refresh and dragging to load more data.
4-
It is bridged from Native in V2，and resolve a big problem in V1 when Javascript thread is stuck.
11+
**React Native Spring ScrollView** is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android) It is easy to support pulling to refresh and dragging to load more data. It is bridged from Native after V2.
512

613
### Features
714

815
* High performance cross-platform native bounces ScrollView (iOS & Android)
916
* Simultaneous gesture on both horizontal and vertical directions.
1017
* Smoothly scroll
11-
* Highly customizing refreshing and loading animation.Fully support `react-native-lottie`. More smoothly animation.
12-
* Scroll to any position
18+
* Highly customizing refreshing and loading animation. Fully support `react-native-lottie` process with `useNativeDriver`.
19+
* Solved the common problem of views that need to move out of the way of the virtual keyboard.
1320
* Native onScroll contentOffset on both horizontal and vertical directions
14-
* Support initialing content offset.
1521
* Resolved no response with onRefresh and onLoading in some special case.
22+
* PagingEnabled on both horizontal and vertical directions.(<font color=red>New</font>)
23+
* Nested self like iOS. (<font color=red>New</font>)
24+
25+
### Documentation
26+
Check out our dedicated documentation page for info about this library, API reference and more:
27+
[Documentation Reference](https://bolan9999.github.io/react-native-spring-scrollview/#/)
1628

1729

1830
### Preview
19-
![Refreshing](../res/LottieRefreshing.gif)
20-
![Loading](../res/LottieLoading.gif)
31+
![Preview](../res/android-test.gif)
32+
2133

‎docs/en/V3/BasicContent.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
### Overview
2+
3+
SpringScrollView is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android). It is same as the ScrollView from React-Native, SpringScrollView simply renders all its react child components at once. That makes it very easy to understand and use. If you need a high-performance reused large list component , maybe [LargeList](https://bolan9999.github.io/react-native-largelist/#/) is a good choice.
4+
5+
Keep in mind that SpringScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. SpringScrollViews default have a `{flex:1}` style, please be sure its parent has abounded height.
6+
7+
### style & contentStyle
8+
9+
As the ScrollView in React-Native, SpringScrollView consists of a wrapper and a content view. The `style` configure the wrapper's style and the `contentStyle` configure the content view's style. The style prop has a `{flex:1}` and the `contentStyle` has a `{flexDirection:"column",justifyContent:"stretch"}` default property. It is different from the official ScrollView. And you can override them. Note that `contentStyle` should not contain a `transform` props.
10+
11+
Props | Type | Default |  description  
12+
---- | ------ | --------- | --------
13+
style | Animated.[ViewStyle](http://facebook.github.io/react-native/docs/view-style-props) | {flex:1} | The wrapper style of the SpringScrollView. It supports Animated style.
14+
contentStyle | [ViewStyle](http://facebook.github.io/react-native/docs/view-style-props) | - | The content view style of the SpringScrollView.
15+
16+
**Precautions：** SpringScrollViews support both horizontal and vertical directions scroll after Version 2 . If the content view is wider than the wrapper, horizontal scroll and bounces will be enabled. ContentStyle supports `{width:"200%"}` or `width:1000` style and so on.

‎docs/en/V3/BasicControl.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!--
2+
* @Author: 石破天惊
3+
* @email: shanshang130@gmail.com
4+
* @Date: 2021-07-23 23:43:47
5+
* @LastEditTime: 2021-07-24 00:00:31
6+
* @LastEditors: 石破天惊
7+
* @Description:
8+
-->
9+
# Basic Props
10+
11+
12+
Props | Type | Default |  description  
13+
---- | ------ | --------- | --------
14+
...ViewProps | - | | All props of [View](http://facebook.github.io/react-native/docs/view)
15+
bounces | boolean | true | Bounces if the content offset is out of the content view. It won't be bounces on the horizontal direction if the content view is not wider than the wrapper view although bounces is true. But it will on the vertical direction.
16+
contentStyle | ViewStyle | undefined | The style of the content view.
17+
scrollEnabled | boolean | true | scrollEnabled
18+
directionalLockEnabled | boolean | false | When true, the SpringScrollView will try to lock to only vertical or horizontal scrolling while dragging.
19+
initialContentOffset | {x:number, y:number} | undefined | initial content offset. Only works when initiation.
20+
showsVerticalScrollIndicator | boolean | true | showsVerticalScrollIndicator
21+
showsHorizontalScrollIndicator | boolean | true | showsHorizontalScrollIndicator
22+
dragToHideKeyboard | boolean | true | dragToHideKeyboard
23+
onSizeChange | ({width:number,height:number})=>any | undefined | The callback when the wrapper view size changed.
24+
onContentSizeChange | ({width:number,height:number})=>any | undefined | The callback when the content view size changed.
25+
inverted | boolean | false | inverted. It is a service for LargeList.
26+
pagingEnabled | boolean | false | When true, the scroll view stops on multiples of `pageSize` when scrolling. This can be used for pagination on both horizontal and vertical directions.
27+
pageSize | {width:number, height:number} | {width:0,height:0} | Works only when `pagingEnabled=true`, the scroll view stops on multiples of `pageSize` when scrolling. This can be used for pagination on both horizontal and vertical directions。If the width or height set to 0, it will equal to the view port of the SpringScrollView's width or height.

‎docs/en/V3/DetailControl.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# 细节控制
2+
3+
属性 | 类型 | 默认值 |  作用  
4+
---- | ------ | --------- | --------
5+
decelerationRate | number | 0.998 | 在内容视图内松开手指，减速滑动的阻尼系数，单位是每毫秒百分比
6+
decelerationRateWhenOut | number | 0.9 | 超出内容视图以后松开手指，减速滑动的阻尼系数，单位是每毫秒百分比
7+
dampingCoefficient | number | 0.5 | 超出内容视图以后，继续滑动的阻尼系数，单位是百分比
8+
reboundEasing | (value: number) => number | Easing.cos | 超出内容视图松开手指完成减速以后的回弹动画函数
9+
reboundDuration | number | 300 | 回弹的时间
10+
getNativeOffset | (offset: Animated.Value) => any | ()=>null | 获得监听滑动偏移并支持原生动画的动画值（该值是合成值，不可监听，不可修改，只能用于原生动画，并且在[处理键盘遮挡](TextInput)的偏移中，该值不会改变）
11+
indicatorDismissTimeInterval | number | 3000 | LargeList滚动停止后指示器衰弱隐藏的时间间隔，单位毫秒

‎docs/en/V3/Event.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!--
2+
* @Author: 石破天惊
3+
* @email: shanshang130@gmail.com
4+
* @Date: 2021-07-23 23:43:47
5+
* @LastEditTime: 2021-07-24 00:22:44
6+
* @LastEditors: 石破天惊
7+
* @Description:
8+
-->
9+
### onTouchBegin : ()=>any
10+
```$js
11+
<SpringScrollView onTouchBegin={()=>{
12+
console.log("onTouchBegin");
13+
} />
14+
```
15+
16+
### onTouchEnd : ()=>any
17+
```$js
18+
<SpringScrollView onTouchEnd={()=>{
19+
console.log("onTouchEnd");
20+
} />
21+
```
22+
23+
### onScrollBeginDrag : ()=>any
24+
```$js
25+
<SpringScrollView onScrollBeginDrag={()=>{
26+
console.log("onScrollBeginDrag");
27+
} />
28+
```
29+
30+
### onScrollEndDrag : ()=>any
31+
```$js
32+
<SpringScrollView onScrollEndDrag={()=>{
33+
console.log("onScrollEndDrag");
34+
} />
35+
```
36+
37+
### onMomentumScrollBegin : ()=>any
38+
```$js
39+
<SpringScrollView onMomentumScrollBegin={()=>{
40+
console.log("onMomentumScrollBegin");
41+
} />
42+
```
43+
44+
### onMomentumScrollEnd : ()=>any
45+
```$js
46+
<SpringScrollView onMomentumScrollEnd={()=>{
47+
console.log("onMomentumScrollEnd");
48+
} />
49+
```

‎docs/en/V3/GettingStart.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!--
2+
* @Author: 石破天惊
3+
* @email: shanshang130@gmail.com
4+
* @Date: 2021-07-23 23:43:47
5+
* @LastEditTime: 2021-07-23 23:51:27
6+
* @LastEditors: 石破天惊
7+
* @Description:
8+
-->
9+
# Getting Started
10+
11+
### Install
12+
13+
RN 0.60+
14+
```
15+
yarn add react-native-spring-scrollview
16+
npx pod-install
17+
```
18+
19+
RN 0.50-0.59
20+
```
21+
yarn add react-native-spring-scrollview@2.0.23
22+
react-native link react-native-spring-scrollview
23+
```
24+
25+
0.49 or lower: Not sure whether it works well.
26+
27+
It is completed if you do not get an error. But for some reason, you should check your native installation
28+
29+
### Check native installation (version 2.0.*)
30+
31+
##### iOS
32+
* Make sure `ProjectPath ==> Libraries ==> RNSpringScrollView.xcodeproj` is in your project.
33+
* Make sure `ProjectPath ==> TARGETS ==> BuildPhases ==> Link Binary With Libraries ==> libRNSpringScrollView.a` is linked to your project.
34+
35+
##### Android
36+
* Make sure `YourProject/android/settings.gradle` contains the information below
37+
```
38+
include ':react-native-spring-scrollview'
39+
project(':react-native-spring-scrollview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spring-scrollview/android')
40+
```
41+
42+
* Make sure `YourProject/android/app/build.gradle` contains the information below
43+
```
44+
dependencies {
45+
compile project(':react-native-spring-scrollview')
46+
compile fileTree(include: ['*.jar'], dir: 'libs')
47+
compile 'com.android.support:appcompat-v7:26.0.0'
48+
compile 'com.facebook.react:react-native:+'
49+
// From node_modules
50+
}
51+
```
52+
53+
* Make sure `new SpringScrollViewPackage()` is in your `MainApplication.java`
54+
```
55+
@Override
56+
protected List<ReactPackage> getPackages() {
57+
return Arrays.<ReactPackage>asList(
58+
new MainReactPackage(),
59+
new SpringScrollViewPackage()
60+
);
61+
}
62+
```
63+
64+
### iOS common installation problems
65+
1. Can not find files `RCTXXXX.h`：
66+
67+
[Click here to find a solution](https://github.com/facebook/react-native/issues/22000#issuecomment-438201084)
68+
69+
### Android common installation problems
70+
71+
1. Can not find files `android/drawable/XXXXXX`, '`android/res/XXXXXX`' ...
72+
73+
Check the compile SDK version is over API 26, or you can modify the version in react-native-spring-scrollview
74+
75+
Make sure `YourProject/android/app/build.gradle` contains google maven:
76+
```
77+
allprojects {
78+
repositories {
79+
mavenLocal()
80+
jcenter()
81+
maven {
82+
url 'https://maven.google.com'
83+
}
84+
maven {
85+
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
86+
url "$rootDir/../node_modules/react-native/android"
87+
}
88+
}
89+
}
90+
```
91+

‎docs/en/V3/KnownIssues.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!--
2+
* @Author: 石破天惊
3+
* @email: shanshang130@gmail.com
4+
* @Date: 2021-07-23 23:43:47
5+
* @LastEditTime: 2021-07-24 00:25:30
6+
* @LastEditors: 石破天惊
7+
* @Description:
8+
-->
9+
# Known issues
10+
1. Due to the RN bug, all views with `overflow:scroll` on Android can not support borderRadius, but you can set a wrapper for it like this:
11+
12+
```
13+
<View style={{borderRadius:10,overflow:"hidden"}}>
14+
<SpringScrollView .../>
15+
</View>
16+
```

0 commit comments

Comments
 (0)