react-native-reanimated-carousel 1.2.0-beta.4 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +44 -0
- package/README.md +82 -90
- package/README.zh-CN.md +81 -90
- package/lib/commonjs/Carousel.js +92 -185
- package/lib/commonjs/Carousel.js.map +1 -1
- package/lib/commonjs/ScrollViewGesture.js +28 -12
- package/lib/commonjs/ScrollViewGesture.js.map +1 -1
- package/lib/commonjs/constants/index.js +9 -1
- package/lib/commonjs/constants/index.js.map +1 -1
- package/lib/commonjs/hooks/useCarouselController.js +67 -20
- package/lib/commonjs/hooks/useCarouselController.js.map +1 -1
- package/lib/commonjs/hooks/useCommonVariables.js +37 -0
- package/lib/commonjs/hooks/useCommonVariables.js.map +1 -0
- package/lib/commonjs/hooks/useIndexController.js +7 -3
- package/lib/commonjs/hooks/useIndexController.js.map +1 -1
- package/lib/commonjs/hooks/useInitProps.js +67 -0
- package/lib/commonjs/hooks/useInitProps.js.map +1 -0
- package/lib/commonjs/hooks/useLayoutConfig.js +40 -0
- package/lib/commonjs/hooks/useLayoutConfig.js.map +1 -0
- package/lib/commonjs/hooks/useOffsetX.js.map +1 -1
- package/lib/commonjs/hooks/useOnProgressChange.js +39 -0
- package/lib/commonjs/hooks/useOnProgressChange.js.map +1 -0
- package/lib/commonjs/hooks/usePropsErrorBoundary.js +3 -2
- package/lib/commonjs/hooks/usePropsErrorBoundary.js.map +1 -1
- package/lib/commonjs/layouts/{NormalLayout.js → BaseLayout.js} +50 -25
- package/lib/commonjs/layouts/BaseLayout.js.map +1 -0
- package/lib/commonjs/layouts/index.js +12 -21
- package/lib/commonjs/layouts/index.js.map +1 -1
- package/lib/commonjs/layouts/normal.js +28 -0
- package/lib/commonjs/layouts/normal.js.map +1 -0
- package/lib/commonjs/layouts/parallax.js +37 -0
- package/lib/commonjs/layouts/parallax.js.map +1 -0
- package/lib/commonjs/layouts/stack.js +220 -0
- package/lib/commonjs/layouts/stack.js.map +1 -0
- package/lib/commonjs/store/index.js +15 -0
- package/lib/commonjs/store/index.js.map +1 -0
- package/lib/module/Carousel.js +87 -178
- package/lib/module/Carousel.js.map +1 -1
- package/lib/module/ScrollViewGesture.js +26 -13
- package/lib/module/ScrollViewGesture.js.map +1 -1
- package/lib/module/constants/index.js +5 -0
- package/lib/module/constants/index.js.map +1 -1
- package/lib/module/hooks/useCarouselController.js +63 -21
- package/lib/module/hooks/useCarouselController.js.map +1 -1
- package/lib/module/hooks/useCommonVariables.js +24 -0
- package/lib/module/hooks/useCommonVariables.js.map +1 -0
- package/lib/module/hooks/useIndexController.js +7 -3
- package/lib/module/hooks/useIndexController.js.map +1 -1
- package/lib/module/hooks/useInitProps.js +55 -0
- package/lib/module/hooks/useInitProps.js.map +1 -0
- package/lib/module/hooks/useLayoutConfig.js +29 -0
- package/lib/module/hooks/useLayoutConfig.js.map +1 -0
- package/lib/module/hooks/useOffsetX.js.map +1 -1
- package/lib/module/hooks/useOnProgressChange.js +30 -0
- package/lib/module/hooks/useOnProgressChange.js.map +1 -0
- package/lib/module/hooks/usePropsErrorBoundary.js +3 -2
- package/lib/module/hooks/usePropsErrorBoundary.js.map +1 -1
- package/lib/module/layouts/BaseLayout.js +75 -0
- package/lib/module/layouts/BaseLayout.js.map +1 -0
- package/lib/module/layouts/index.js +9 -3
- package/lib/module/layouts/index.js.map +1 -1
- package/lib/module/layouts/normal.js +20 -0
- package/lib/module/layouts/normal.js.map +1 -0
- package/lib/module/layouts/parallax.js +29 -0
- package/lib/module/layouts/parallax.js.map +1 -0
- package/lib/module/layouts/stack.js +205 -0
- package/lib/module/layouts/stack.js.map +1 -0
- package/lib/module/store/index.js +3 -0
- package/lib/module/store/index.js.map +1 -0
- package/lib/typescript/Carousel.d.ts +1 -1
- package/lib/typescript/ScrollViewGesture.d.ts +3 -9
- package/lib/typescript/constants/index.d.ts +3 -0
- package/lib/typescript/hooks/useCarouselController.d.ts +11 -2
- package/lib/typescript/hooks/useCommonVariables.d.ts +9 -0
- package/lib/typescript/hooks/useIndexController.d.ts +1 -0
- package/lib/typescript/hooks/useInitProps.d.ts +8 -0
- package/lib/typescript/hooks/useLayoutConfig.d.ts +7 -0
- package/lib/typescript/hooks/useOffsetX.d.ts +1 -2
- package/lib/typescript/hooks/useOnProgressChange.d.ts +6 -0
- package/lib/typescript/layouts/BaseLayout.d.ts +14 -0
- package/lib/typescript/layouts/index.d.ts +10 -4
- package/lib/typescript/layouts/normal.d.ts +12 -0
- package/lib/typescript/layouts/parallax.d.ts +41 -0
- package/lib/typescript/layouts/stack.d.ts +37 -0
- package/lib/typescript/store/index.d.ts +10 -0
- package/lib/typescript/types.d.ts +24 -49
- package/package.json +7 -3
- package/src/Carousel.tsx +102 -225
- package/src/ScrollViewGesture.tsx +29 -30
- package/src/constants/index.ts +6 -0
- package/src/hooks/useCarouselController.tsx +96 -38
- package/src/hooks/useCommonVariables.ts +29 -0
- package/src/hooks/useIndexController.ts +13 -1
- package/src/hooks/useInitProps.ts +65 -0
- package/src/hooks/useLayoutConfig.ts +26 -0
- package/src/hooks/useOffsetX.ts +1 -1
- package/src/hooks/useOnProgressChange.ts +39 -0
- package/src/hooks/usePropsErrorBoundary.ts +3 -1
- package/src/layouts/BaseLayout.tsx +113 -0
- package/src/layouts/index.tsx +11 -4
- package/src/layouts/normal.ts +22 -0
- package/src/layouts/parallax.ts +80 -0
- package/src/layouts/stack.ts +357 -0
- package/src/store/index.ts +12 -0
- package/src/types.ts +28 -50
- package/lib/commonjs/layouts/NormalLayout.js.map +0 -1
- package/lib/commonjs/layouts/StackLayout.js +0 -186
- package/lib/commonjs/layouts/StackLayout.js.map +0 -1
- package/lib/module/layouts/NormalLayout.js +0 -53
- package/lib/module/layouts/NormalLayout.js.map +0 -1
- package/lib/module/layouts/StackLayout.js +0 -161
- package/lib/module/layouts/StackLayout.js.map +0 -1
- package/lib/typescript/layouts/NormalLayout.d.ts +0 -11
- package/lib/typescript/layouts/StackLayout.d.ts +0 -21
- package/src/layouts/NormalLayout.tsx +0 -107
- package/src/layouts/StackLayout.tsx +0 -356
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,47 @@
|
|
|
1
|
+
## [2.1.2](https://github.com/dohooo/react-native-reanimated-carousel/compare/v2.1.1...v2.1.2) (2022-01-11)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* fix wrong offset when out of bounds ([db27279](https://github.com/dohooo/react-native-reanimated-carousel/commit/db2727951916876205a315c4b2fdcee63e74fab0)), closes [#94](https://github.com/dohooo/react-native-reanimated-carousel/issues/94)
|
|
7
|
+
* remove ExtrapolateParameter of normal layout translate ([850e960](https://github.com/dohooo/react-native-reanimated-carousel/commit/850e96082ec44422d99c5a5a1767a6530b1405d9)), closes [#96](https://github.com/dohooo/react-native-reanimated-carousel/issues/96)
|
|
8
|
+
|
|
9
|
+
## [2.1.1](https://github.com/dohooo/react-native-reanimated-carousel/compare/v2.1.0...v2.1.1) (2022-01-11)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
* autoplay will scroll out of bounds ([2cfacff](https://github.com/dohooo/react-native-reanimated-carousel/commit/2cfacffb62f1e4934393cb5f42e55cbdddc2d8f2))
|
|
15
|
+
|
|
16
|
+
# [2.1.0](https://github.com/dohooo/react-native-reanimated-carousel/compare/v2.0.0...v2.1.0) (2022-01-08)
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
### Features
|
|
20
|
+
|
|
21
|
+
* pass animation value to renderItem ([bf57233](https://github.com/dohooo/react-native-reanimated-carousel/commit/bf572335a19179aefd52d0bf43e61029ec2f945a)), closes [#89](https://github.com/dohooo/react-native-reanimated-carousel/issues/89)
|
|
22
|
+
* support to custom carousel animations by `customAnimation` `customConfig` props ([eb3082b](https://github.com/dohooo/react-native-reanimated-carousel/commit/eb3082b74d3f08f6205cce47a30435ffc8570145))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### BREAKING CHANGES
|
|
26
|
+
|
|
27
|
+
* Remove the parameter of `renderItem` and change it to `info` object
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## [1.1.1](https://github.com/dohooo/react-native-reanimated-carousel/compare/v2.0.0...v2.1.0) (2022-01-04)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
### Bug Fixes
|
|
35
|
+
|
|
36
|
+
* fix bug with windowSize props ([8a048df](https://github.com/dohooo/react-native-reanimated-carousel/commit/8a048dfafbf46ba6d4776f82564dea43af026144)), closes [#71](https://github.com/dohooo/react-native-reanimated-carousel/issues/71)
|
|
37
|
+
|
|
38
|
+
# [2.0.0](https://github.com/dohooo/react-native-reanimated-carousel/compare/v1.2.0-beta.4...v2.0.0) (2022-01-07)
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
### Bug Fixes
|
|
42
|
+
|
|
43
|
+
* fix bug from refactoring ([c77f4d8](https://github.com/dohooo/react-native-reanimated-carousel/commit/c77f4d8604e319528f2d15fd288734749615e077))
|
|
44
|
+
|
|
1
45
|
# [1.2.0-beta.4](https://github.com/dohooo/react-native-reanimated-carousel/compare/v1.2.0-beta.3...v1.2.0-beta.4) (2022-01-05)
|
|
2
46
|
|
|
3
47
|
|
package/README.md
CHANGED
|
@@ -7,66 +7,78 @@ English | [简体中文](./README.zh-CN.md)
|
|
|
7
7
|
|
|
8
8
|
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
9
9
|
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
10
|
+
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
10
11
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues)
|
|
11
12
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
|
|
12
13
|
[](https://discord.gg/KsXRuDs43y)
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
## ReactNative community's best use of the carousel component! 🎉🎉🎉
|
|
16
|
+
|
|
17
|
+
- **It completely solves this** [[problem]](https://github.com/meliorence/react-native-snap-carousel/issues/632) **for `react-native-snap-carousel`!**
|
|
18
|
+
- **Simple**、**Infinitely scrolling very smooth**、**Fully implemented using Reanimated 2!**
|
|
19
|
+
|
|
20
|
+
> v2 has been released! Join it! [[v1 docs]](https://github.com/dohooo/react-native-reanimated-carousel/tree/v1.x.x)
|
|
21
|
+
|
|
22
|
+
> Click on the image to see the demo. [[Try it]](https://snack.expo.dev/@zhaodonghao586/simple-carousel) 🍺
|
|
15
23
|
|
|
16
24
|
<p align="center">
|
|
17
|
-
<a href="
|
|
25
|
+
<a href="./example/src/normal/index.tsx">
|
|
18
26
|
<img src="assets/normal-horizontal.gif" width="300"/>
|
|
19
27
|
</a>
|
|
20
|
-
<a href="
|
|
28
|
+
<a href="./example/src/normal/index.tsx">
|
|
21
29
|
<img src="assets/normal-vertical.gif" width="300"/>
|
|
22
30
|
</a>
|
|
23
|
-
<a href="
|
|
31
|
+
<a href="./example/src/parallax/index.tsx">
|
|
24
32
|
<img src="assets/parallax-horizontal.gif" width="300"/>
|
|
25
33
|
</a>
|
|
26
|
-
<a href="
|
|
34
|
+
<a href="./example/src/parallax/index.tsx">
|
|
27
35
|
<img src="assets/parallax-vertical.gif" width="300"/>
|
|
28
36
|
</a>
|
|
29
|
-
<a href="
|
|
37
|
+
<a href="./example/src/stack/index.tsx">
|
|
30
38
|
<img src="assets/stack-horizontal-left.gif" width="300"/>
|
|
31
39
|
</a>
|
|
32
|
-
<a href="
|
|
40
|
+
<a href="./example/src/stack/index.tsx">
|
|
33
41
|
<img src="assets/stack-horizontal-right.gif" width="300"/>
|
|
34
42
|
</a>
|
|
35
|
-
<a href="
|
|
43
|
+
<a href="./example/src/stack/index.tsx">
|
|
36
44
|
<img src="assets/stack-vertical-left.gif" width="300"/>
|
|
37
45
|
</a>
|
|
38
|
-
<a href="
|
|
46
|
+
<a href="./example/src/stack/index.tsx">
|
|
39
47
|
<img src="assets/stack-vertical-right.gif" width="300"/>
|
|
40
48
|
</a>
|
|
41
49
|
</p>
|
|
42
50
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
## ReactNative community's best use of the carousel component! 🎉🎉🎉
|
|
46
|
-
|
|
47
|
-
- It completely solves this [problem](https://github.com/meliorence/react-native-snap-carousel/issues/632) for `react-native-snap-carousel`! More styles and apis in development... [Try it](https://snack.expo.dev/@zhaodonghao586/simple-carousel)
|
|
48
|
-
- **Simple**、**Infinitely scrolling very smooth**、**Fully implemented using Reanimated 2!**
|
|
49
|
-
|
|
50
|
-
## Reason
|
|
51
|
+
> Now you can make cool animations with us! Very easy! [[Details]](./docs/custom-animation.md)
|
|
51
52
|
|
|
52
|
-
<details>
|
|
53
|
-
<summary>The common RN infinite scroll component. It get stuck on a fast slide. Wait for the next element to appear. This component will not have similar problems.Because using a completely different approach so the best performance is achieved.That's why this library was created.</summary>
|
|
54
|
-
<p align="center">
|
|
55
|
-
Use react-native-snap-carousel for quick swiping,you can see caton clearly when you reach the junction.(gif 4.6mb)
|
|
56
|
-
</p>
|
|
57
53
|
<p align="center">
|
|
58
|
-
<
|
|
54
|
+
<a href="./example/src/advanced-parallax/index.tsx">
|
|
55
|
+
<img src="assets/advanced-parallax.gif" width="300"/>
|
|
56
|
+
</a>
|
|
57
|
+
<a href="./example/src/pause-advanced-parallax/index.tsx">
|
|
58
|
+
<img src="assets/pause-advanced-parallax.gif" width="300"/>
|
|
59
|
+
</a>
|
|
60
|
+
<a href="./example/src/scale-fade-in-out/index.tsx">
|
|
61
|
+
<img src="assets/scale-fade-in-out.gif" width="300"/>
|
|
62
|
+
</a>
|
|
63
|
+
<a href="./example/src/rotate-scale-fade-in-out/index.tsx">
|
|
64
|
+
<img src="assets/rotate-scale-fade-in-out.gif" width="300"/>
|
|
65
|
+
</a>
|
|
66
|
+
<a href="./example/src/rotate-in-out/index.tsx">
|
|
67
|
+
<img src="assets/rotate-in-out.gif" width="300"/>
|
|
68
|
+
</a>
|
|
69
|
+
<a href="./example/src/anim-tab-bar/index.tsx">
|
|
70
|
+
<img src="assets/anim-tab-bar.gif" width="300"/>
|
|
71
|
+
</a>
|
|
59
72
|
</p>
|
|
60
73
|
|
|
61
|
-
|
|
62
|
-
Compared with react-native-reanimated-carousel,The actual test was ten slides per second, but it didn't show up very well in gif.
|
|
63
|
-
</p>
|
|
64
|
-
<p align="center">
|
|
65
|
-
<img src="assets/normal-fast.gif" width="50%"/>
|
|
66
|
-
</p>
|
|
67
|
-
</details>
|
|
74
|
+
## Table of contents
|
|
68
75
|
|
|
69
|
-
|
|
76
|
+
1. [Installation](#Installation)
|
|
77
|
+
1. [Usage](#Usage)
|
|
78
|
+
1. [Props](./docs/props.md)
|
|
79
|
+
1. [Tips](#Tips)
|
|
80
|
+
1. [Reason](#Reason)
|
|
81
|
+
1. [Example](#Example)
|
|
70
82
|
|
|
71
83
|
## Installation
|
|
72
84
|
|
|
@@ -84,80 +96,60 @@ npm install react-native-reanimated-carousel
|
|
|
84
96
|
|
|
85
97
|
Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler) and [`react-native-reanimated(>=2.0.0)`](https://github.com/kmagiera/react-native-reanimated).
|
|
86
98
|
|
|
87
|
-
## EXPO
|
|
88
|
-
|
|
89
|
-
If use EXPO managed workflow please ensure that the version is greater than 41.Because the old version not support `Reanimated(v2)`
|
|
90
|
-
|
|
91
99
|
## Usage
|
|
92
100
|
|
|
93
101
|
```tsx
|
|
94
102
|
import Carousel from 'react-native-reanimated-carousel';
|
|
95
103
|
|
|
96
|
-
<Carousel
|
|
97
|
-
width={
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}}
|
|
104
|
+
<Carousel
|
|
105
|
+
width={300}
|
|
106
|
+
height={150}
|
|
107
|
+
data={[1, 2, 3]}
|
|
108
|
+
renderItem={({ item }) => <AnyElement />}
|
|
102
109
|
/>;
|
|
103
110
|
```
|
|
104
111
|
|
|
105
112
|
## Tips
|
|
106
113
|
|
|
107
|
-
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
| panGestureHandlerProps | ❌ | {} | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props |
|
|
135
|
-
| windowSize | ❌ | 0 | number | The maximum number of items that can respond to pan gesture events, `0` means all items will respond to pan gesture events |
|
|
136
|
-
| onProgressChange | ❌ | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | On progress change. `offsetProgress`:Total of offset distance (0 390 780 ...); `absoluteProgress`:Convert to index (0 1 2 ...) |
|
|
137
|
-
| animationConfig | ❌ | { snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | {moveSize?: number;stackInterval?: number;scaleInterval?: number;rotateZDeg?: number;snapDirection?: 'left' \| 'right';} | Stack layout animation style |
|
|
138
|
-
| showLength | ❌ | data.length - 1 | number | The maximum number of items will show in stack |
|
|
139
|
-
| pagingEnabled | ❌ | true | boolean | When true, the scroll view stops on multiples of the scroll view's size when scrolling |
|
|
140
|
-
| enableSnap | ❌ | true | boolean | If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false |
|
|
141
|
-
|
|
142
|
-
## Ref
|
|
143
|
-
|
|
144
|
-
| name | types | description |
|
|
145
|
-
| --------------- | ------------------------------------------- | ---------------------- |
|
|
146
|
-
| prev | ()=>void | Play the last one |
|
|
147
|
-
| loop | ()=>void | Play the next one |
|
|
148
|
-
| goToIndex | (index: number, animated?: boolean) => void | Go to index |
|
|
149
|
-
| getCurrentIndex | ()=>number | Get current item index |
|
|
114
|
+
- Optimizing
|
|
115
|
+
|
|
116
|
+
- When rendering a large number of elements, you can use the 'windowSize' property to control how many items of the current element are rendered. The default is full rendering. After testing without this property, frames will drop when rendering 200 empty views. After setting this property, rendering 1000 empty views is still smooth. (The specific number depends on the phone model tested)
|
|
117
|
+
|
|
118
|
+
- RTL
|
|
119
|
+
- Support to RTL mode with no more configuration needed. But in RTL mode, need to manually set the autoPlayReverse props for autoplay to control scrolling direction.
|
|
120
|
+
- EXPO
|
|
121
|
+
- If use EXPO managed workflow please ensure that the version is greater than 41.Because the old version not support `Reanimated(v2)`.
|
|
122
|
+
|
|
123
|
+
## Reason
|
|
124
|
+
|
|
125
|
+
<details>
|
|
126
|
+
<summary>The common RN infinite scroll component. It get stuck on a fast slide. Wait for the next element to appear. This component will not have similar problems.Because using a completely different approach so the best performance is achieved.That's why this library was created.</summary>
|
|
127
|
+
<p align="center">
|
|
128
|
+
Use react-native-snap-carousel for quick swiping,you can see caton clearly when you reach the junction.(gif 4.6mb)
|
|
129
|
+
</p>
|
|
130
|
+
<p align="center">
|
|
131
|
+
<img src="assets/react-native-snap-carousel.gif" width="50%"/>
|
|
132
|
+
</p>
|
|
133
|
+
|
|
134
|
+
<p align="center">
|
|
135
|
+
Compared with react-native-reanimated-carousel,The actual test was ten slides per second, but it didn't show up very well in gif.
|
|
136
|
+
</p>
|
|
137
|
+
<p align="center">
|
|
138
|
+
<img src="assets/normal-fast.gif" width="50%"/>
|
|
139
|
+
</p>
|
|
140
|
+
</details>
|
|
150
141
|
|
|
151
142
|
## Example
|
|
152
143
|
|
|
153
144
|
```shell
|
|
154
|
-
yarn
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
## Contributing
|
|
145
|
+
yarn ios
|
|
146
|
+
# use pretty images
|
|
147
|
+
yarn ios:pretty
|
|
159
148
|
|
|
160
|
-
|
|
149
|
+
yarn android
|
|
150
|
+
# use pretty images
|
|
151
|
+
yarn android:pretty
|
|
152
|
+
```
|
|
161
153
|
|
|
162
154
|
## License
|
|
163
155
|
|
package/README.zh-CN.md
CHANGED
|
@@ -7,64 +7,78 @@
|
|
|
7
7
|
|
|
8
8
|
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
9
9
|
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
10
|
+
[](https://www.npmjs.com/package/react-native-reanimated-carousel)
|
|
10
11
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues)
|
|
11
12
|
[](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
|
|
12
13
|
[](https://discord.gg/KsXRuDs43y)
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
## ReactNative 社区最好用的轮播图组件! 🎉🎉🎉
|
|
16
|
+
|
|
17
|
+
- **完全解决了`react-native-snap-carousel`的** [[问题]](https://github.com/meliorence/react-native-snap-carousel/issues/632)
|
|
18
|
+
- **易用**、**无限滚动**、**完全使用 Reanimated2 实现**
|
|
19
|
+
|
|
20
|
+
> v2 已经发布，希望大家喜欢!~ [[v1 文档]](https://github.com/dohooo/react-native-reanimated-carousel/tree/v1.x.x)
|
|
21
|
+
|
|
22
|
+
> 点击图片，查看 demo。[[试一下]](https://snack.expo.dev/@zhaodonghao586/simple-carousel) 🍺
|
|
15
23
|
|
|
16
24
|
<p align="center">
|
|
17
|
-
<a href="
|
|
25
|
+
<a href="./example/src/normal/index.tsx">
|
|
18
26
|
<img src="assets/normal-horizontal.gif" width="300"/>
|
|
19
27
|
</a>
|
|
20
|
-
<a href="
|
|
28
|
+
<a href="./example/src/normal/index.tsx">
|
|
21
29
|
<img src="assets/normal-vertical.gif" width="300"/>
|
|
22
30
|
</a>
|
|
23
|
-
<a href="
|
|
31
|
+
<a href="./example/src/parallax/index.tsx">
|
|
24
32
|
<img src="assets/parallax-horizontal.gif" width="300"/>
|
|
25
33
|
</a>
|
|
26
|
-
<a href="
|
|
34
|
+
<a href="./example/src/parallax/index.tsx">
|
|
27
35
|
<img src="assets/parallax-vertical.gif" width="300"/>
|
|
28
36
|
</a>
|
|
29
|
-
<a href="
|
|
37
|
+
<a href="./example/src/stack/index.tsx">
|
|
30
38
|
<img src="assets/stack-horizontal-left.gif" width="300"/>
|
|
31
39
|
</a>
|
|
32
|
-
<a href="
|
|
40
|
+
<a href="./example/src/stack/index.tsx">
|
|
33
41
|
<img src="assets/stack-horizontal-right.gif" width="300"/>
|
|
34
42
|
</a>
|
|
35
|
-
<a href="
|
|
43
|
+
<a href="./example/src/stack/index.tsx">
|
|
36
44
|
<img src="assets/stack-vertical-left.gif" width="300"/>
|
|
37
45
|
</a>
|
|
38
|
-
<a href="
|
|
46
|
+
<a href="./example/src/stack/index.tsx">
|
|
39
47
|
<img src="assets/stack-vertical-right.gif" width="300"/>
|
|
40
48
|
</a>
|
|
41
49
|
</p>
|
|
42
50
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
## ReactNative 社区最好用的轮播图组件! 🎉🎉🎉
|
|
46
|
-
|
|
47
|
-
- 完全解决了`react-native-snap-carousel`的[问题](https://github.com/meliorence/react-native-snap-carousel/issues/632)! 更多样式与 API 正在开发中...[试一下](https://snack.expo.dev/@zhaodonghao586/simple-carousel)
|
|
48
|
-
- **易用**、**无限滚动**、**完全使用 Reanimated2 实现**
|
|
49
|
-
|
|
50
|
-
## 原因
|
|
51
|
+
> 现在你可以和我们一起来制作酷炫的动画了！ 非常简单! [[详情]](./docs/custom-animation.zh-CN.md)
|
|
51
52
|
|
|
52
|
-
<details>
|
|
53
|
-
<summary>常见的无限滚动轮播图，在快速滑动时会出现卡住的情况，这是因为实现方式而导致的问题。所以这个组件用了完全不同的方式来实现，并获得了最佳的性能也解决了这个问题，这就是创建这个库的原因。</summary>
|
|
54
|
-
<p align="center">
|
|
55
|
-
使用react-native-snap-carousel快速滑动，当到连接处时可以看清楚的看到卡顿。(gif 4.6mb)
|
|
56
|
-
</p>
|
|
57
53
|
<p align="center">
|
|
58
|
-
<
|
|
54
|
+
<a href="./example/src/advanced-parallax/index.tsx">
|
|
55
|
+
<img src="assets/advanced-parallax.gif" width="300"/>
|
|
56
|
+
</a>
|
|
57
|
+
<a href="./example/src/pause-advanced-parallax/index.tsx">
|
|
58
|
+
<img src="assets/pause-advanced-parallax.gif" width="300"/>
|
|
59
|
+
</a>
|
|
60
|
+
<a href="./example/src/scale-fade-in-out/index.tsx">
|
|
61
|
+
<img src="assets/scale-fade-in-out.gif" width="300"/>
|
|
62
|
+
</a>
|
|
63
|
+
<a href="./example/src/rotate-scale-fade-in-out/index.tsx">
|
|
64
|
+
<img src="assets/rotate-scale-fade-in-out.gif" width="300"/>
|
|
65
|
+
</a>
|
|
66
|
+
<a href="./example/src/rotate-in-out/index.tsx">
|
|
67
|
+
<img src="assets/rotate-in-out.gif" width="300"/>
|
|
68
|
+
</a>
|
|
69
|
+
<a href="./example/src/anim-tab-bar/index.tsx">
|
|
70
|
+
<img src="assets/anim-tab-bar.gif" width="300"/>
|
|
71
|
+
</a>
|
|
59
72
|
</p>
|
|
60
73
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
74
|
+
## 目录
|
|
75
|
+
|
|
76
|
+
1. [安装](#安装)
|
|
77
|
+
1. [使用](#使用)
|
|
78
|
+
1. [Props](./docs/props.zh-CN.md)
|
|
79
|
+
1. [提示](#提示)
|
|
80
|
+
1. [原因](#原因)
|
|
81
|
+
1. [示例](#示例)
|
|
68
82
|
|
|
69
83
|
---
|
|
70
84
|
|
|
@@ -84,80 +98,57 @@ npm install react-native-reanimated-carousel
|
|
|
84
98
|
|
|
85
99
|
并且我们需要安装 [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler) 、[`react-native-reanimated(>=2.0.0)`](https://github.com/kmagiera/react-native-reanimated)，安装步骤可参考各自文档。
|
|
86
100
|
|
|
87
|
-
## EXPO
|
|
88
|
-
|
|
89
|
-
如果你使用 EXPO 托管工作流，请确定你的 EXPO SDK 版本大于 41，因为旧的版本并不支持`Reanimated(v2)`
|
|
90
|
-
|
|
91
101
|
## 使用
|
|
92
102
|
|
|
93
103
|
```tsx
|
|
94
104
|
import Carousel from 'react-native-reanimated-carousel';
|
|
95
105
|
|
|
96
|
-
<Carousel
|
|
97
|
-
width={
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}}
|
|
106
|
+
<Carousel
|
|
107
|
+
width={300}
|
|
108
|
+
height={150}
|
|
109
|
+
data={[1, 2, 3]}
|
|
110
|
+
renderItem={({ item }) => <AnyElement />}
|
|
102
111
|
/>;
|
|
103
112
|
```
|
|
104
113
|
|
|
105
114
|
## 提示
|
|
106
|
-
|
|
107
|
-
- 优化
|
|
108
|
-
- 当渲染大量元素时，可使用`windowSize`属性，来控制当前元素的两侧渲染数量，默认为全量渲染。经测试不加此属性，渲染 200 个空 view 时会出现掉帧情况，设置此属性后渲染 1000 个空 view 依旧流畅。（具体数量与测试的手机型号相关）
|
|
109
|
-
|
|
110
|
-
- RTL
|
|
111
|
-
- 所有layout均完美支持RTL模式，并且无需再做任何配置。但在RTL模式下使用自动播放时，默认不会自动转换方向，需要结合autoPlayReverse来手动控制方向。
|
|
112
|
-
|
|
113
|
-
## Props
|
|
114
|
-
|
|
115
|
-
| name | required | default | types | description |
|
|
116
|
-
| ----------------------- | ------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
|
|
117
|
-
| data | ✅ | | T[] | 即将渲染的数据集合 |
|
|
118
|
-
| renderItem | ✅ | | (data: T, index: number) => React.ReactNode | 渲染元素的方法 |
|
|
119
|
-
| vertical | ❌ | false | boolean | 将元素垂直布局而不是水平 |
|
|
120
|
-
| width | 垂直时 ❌ 水平时 ✅ | '100%' | number \| undefined | 指定每一项的宽度 |
|
|
121
|
-
| height | 垂直时 ✅ 水平时 ❌ | '100%' | number \| undefined | 指定每一项的高度 |
|
|
122
|
-
| style | ❌ | {} | ViewStyle | 轮播图容器样式 |
|
|
123
|
-
| defaultIndex | ❌ | 0 | number | 默认 index |
|
|
124
|
-
| autoPlay | ❌ | false | boolean | 是否自动播放 |
|
|
125
|
-
| autoPlayReverse | ❌ | false | boolean | 是否倒序自动播放 |
|
|
126
|
-
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | 自动播放的间隔 |
|
|
127
|
-
| mode | ❌ | defalut | 'default'\|'stack'\|'parallax' | 轮播图播放模式 |
|
|
128
|
-
| loop | ❌ | true | boolean | 是否循环播放 |
|
|
129
|
-
| parallaxScrollingOffset | ❌ | 100 | number | 当使用 mode=`parallax`,这个属性可以控制两侧图片离中间元素的距离 |
|
|
130
|
-
| parallaxScrollingScale | ❌ | 0.8 | number | 当使用 mode=`parallax`,这个属性可以控制两侧图片的缩放比例 |
|
|
131
|
-
| onSnapToItem | ❌ | | (index: number) => void | 切换至另一张轮播图时触发 |
|
|
132
|
-
| onScrollBegin | ❌ | | () => void | 切换动画开始时触发 |
|
|
133
|
-
| onScrollEnd | ❌ | | (previous: number, current: number) => void | 切换动画结束时触发 |
|
|
134
|
-
| panGestureHandlerProps | ❌ | {} | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props |
|
|
135
|
-
| windowSize | ❌ | 0 | number | 能响应平移手势事件的最大 item 数量，0 表示所有元素都会先响应 |
|
|
136
|
-
| onProgressChange | ❌ | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | 当滚动进度发生变化时触发 `offsetProgress`:总的偏移值 (0 390 780 ...); `absoluteProgress`:转化为 index 的进度变化 (0 1 2 ...) |
|
|
137
|
-
| animationConfig | ❌ | { snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | {moveSize?: number;stackInterval?: number;scaleInterval?: number;rotateZDeg?: number;snapDirection?: 'left' \| 'right';} | 堆栈视图的动画样式 |
|
|
138
|
-
| showLength | ❌ | data.length - 1 | number | 堆栈视图中展示元素的最大数量 |
|
|
139
|
-
| pagingEnabled | ❌ | true | boolean | 当值为 true 时，滚动条会停在滚动视图的尺寸的整数倍位置。 |
|
|
140
|
-
| enableSnap | ❌ | true | boolean | 如果启用，松开触摸会滚动到最近的元素，当 pagingEnabled=false 时有效 |
|
|
141
|
-
|
|
142
|
-
## Ref
|
|
143
|
-
|
|
144
|
-
| name | types | description |
|
|
145
|
-
| --------------- | ------------------------------------------- | ------------------ |
|
|
146
|
-
| prev | ()=>void | 切换至上一张 |
|
|
147
|
-
| loop | ()=>void | 切换至下一张 |
|
|
148
|
-
| goToIndex | (index: number, animated?: boolean) => void | 切换至指定下标元素 |
|
|
149
|
-
| getCurrentIndex | ()=>number | 获得当前轮播图下标 |
|
|
150
115
|
|
|
116
|
+
- 优化
|
|
117
|
+
- 当渲染大量元素时，可使用`windowSize`属性，来控制当前元素的两侧渲染数量，默认为全量渲染。经测试不加此属性，渲染 200 个空 view 时会出现掉帧情况，设置此属性后渲染 1000 个空 view 依旧流畅。（具体数量与测试的手机型号相关）
|
|
118
|
+
- RTL
|
|
119
|
+
- 所有 layout 均完美支持 RTL 模式，并且无需再做任何配置。但在 RTL 模式下使用自动播放时，默认不会自动转换方向，需要结合 autoPlayReverse 来手动控制方向。
|
|
120
|
+
- EXPO
|
|
121
|
+
- 如果你使用 EXPO 托管工作流，请确定你的 EXPO SDK 版本大于 41，因为旧的版本并不支持`Reanimated(v2)`。
|
|
122
|
+
|
|
123
|
+
## 原因
|
|
124
|
+
|
|
125
|
+
<details>
|
|
126
|
+
<summary>常见的无限滚动轮播图，在快速滑动时会出现卡住的情况，这是因为实现方式而导致的问题。所以这个组件用了完全不同的方式来实现，并获得了最佳的性能也解决了这个问题，这就是创建这个库的原因。</summary>
|
|
127
|
+
<p align="center">
|
|
128
|
+
使用react-native-snap-carousel快速滑动，当到连接处时可以看清楚的看到卡顿。(gif 4.6mb)
|
|
129
|
+
</p>
|
|
130
|
+
<p align="center">
|
|
131
|
+
<img src="assets/react-native-snap-carousel.gif" width="50%"/>
|
|
132
|
+
</p>
|
|
133
|
+
|
|
134
|
+
<p align="center">
|
|
135
|
+
使用react-native-reanimated-carousel对比,每秒滚动十张依然顺畅链接，无限滚动。这里使用了gif无法很清晰的看出。
|
|
136
|
+
</p>
|
|
137
|
+
<p align="center">
|
|
138
|
+
<img src="assets/normal-fast.gif" width="50%"/>
|
|
139
|
+
</p>
|
|
140
|
+
</details>
|
|
151
141
|
## 示例
|
|
152
142
|
|
|
153
143
|
```shell
|
|
154
|
-
yarn
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
## 参与贡献
|
|
144
|
+
yarn ios
|
|
145
|
+
# 使用更好看的图片
|
|
146
|
+
yarn ios:pretty
|
|
159
147
|
|
|
160
|
-
|
|
148
|
+
yarn android
|
|
149
|
+
# 使用更好看的图片
|
|
150
|
+
yarn android:pretty
|
|
151
|
+
```
|
|
161
152
|
|
|
162
153
|
## 许可
|
|
163
154
|
|