Skip to content

Commit 81d48ce

Browse files
dohooodohooo
committed
docs: update README file
1 parent 30bb031 commit 81d48ce

File tree

3 files changed

+45
-41
lines changed

3 files changed

+45
-41
lines changed

‎README.md‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -86,24 +86,25 @@ import Carousel from "react-native-reanimated-carousel";
8686

8787
## Props
8888

89-
| name | required | default | types | description |
90-
| ----------------------- | -------- | --------------- | ------------------------------------------- | ------------------------------------------------------------------------------- |
91-
| data | ✅ | | T[] | Carousel items data set |
92-
| width | ✅ | | number | Specified carousel container width |
93-
| renderItem | ✅ | | (data: T, index: number) => React.ReactNode | Render carousel item |
94-
| autoPlay | ❌ | false | boolean | Auto play |
95-
| autoPlayReverse | ❌ | false | boolean | Auto play reverse playback |
96-
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | Auto play playback interval |
97-
| mode | ❌ | defalut | 'default'\|'parallax' | Carousel Animated transitions |
98-
| loop | ❌ | true | boolean | Carousel loop playback |
99-
| parallaxScrollingOffset | ❌ | 100 | number | When use 'parallax' Layout props,this prop can be control prev/next item offset |
100-
| parallaxScrollingScale | ❌ | 0.8 | number | When use 'parallax' Layout props,this prop can be control prev/next item scale |
101-
| style | ❌ | {} | ViewStyle | Carousel container style |
102-
| height | ❌ | '100%' | undefined \| string \| number | Specified carousel container height |
103-
| timingConfig | ❌ | {duration: 250} | Animated.WithTimingConfig | Timing config of translation animated |
104-
| onSnapToItem | ❌ | | (index: number) => void | Callback fired when navigating to an item |
105-
| onScrollBegin | ❌ | | () => void | Callback fired when scroll begin |
106-
| onScrollEnd | ❌ | | (previous: number, current: number) => void | Callback fired when scroll end |
89+
| name | required | default | types | description |
90+
| ----------------------- | -------- | --------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------- |
91+
| data | ✅ | | T[] | Carousel items data set |
92+
| width | ✅ | | number | Specified carousel container width |
93+
| renderItem | ✅ | | (data: T, index: number) => React.ReactNode | Render carousel item |
94+
| autoPlay | ❌ | false | boolean | Auto play |
95+
| autoPlayReverse | ❌ | false | boolean | Auto play reverse playback |
96+
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | Auto play playback interval |
97+
| mode | ❌ | defalut | 'default'\|'parallax' | Carousel Animated transitions |
98+
| loop | ❌ | true | boolean | Carousel loop playback |
99+
| parallaxScrollingOffset | ❌ | 100 | number | When use 'parallax' Layout props,this prop can be control prev/next item offset |
100+
| parallaxScrollingScale | ❌ | 0.8 | number | When use 'parallax' Layout props,this prop can be control prev/next item scale |
101+
| style | ❌ | {} | ViewStyle | Carousel container style |
102+
| height | ❌ | '100%' | undefined \| string \| number | Specified carousel container height |
103+
| timingConfig | ❌ | {duration: 250} | Animated.WithTimingConfig | Timing config of translation animated |
104+
| onSnapToItem | ❌ | | (index: number) => void | Callback fired when navigating to an item |
105+
| onScrollBegin | ❌ | | () => void | Callback fired when scroll begin |
106+
| onScrollEnd | ❌ | | (previous: number, current: number) => void | Callback fired when scroll end |
107+
| panGestureHandlerProps | ❌ | {} | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props |
107108

108109
## Ref
109110

‎README.zh-CN.md‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@
1717
<br/>
1818

1919
## 原因
20+
2021
🎉 **易用、无限滚动、完全使用 Reanimated2 实现**
2122

2223
> 常见的无限滚动轮播图，在快速滑动时会出现卡住的情况，这是因为实现方式而导致的问题。这个组件用了不同的方式来实现，解决了这个问题，这就是创建这个库的原因。
2324
2425
> 目前他只满足了我工作上的需要，欢迎大家的 ISSUES/PR。[在 SNACK 上尝试](https://snack.expo.dev/@zhaodonghao586/simple-carousel)
2526
26-
2727
<p align="center">
2828
使用react-native-snap-carousel快速滑动，当到连接处时可以看清楚的看到卡顿。(gif 4.6mb)
2929
</p>
@@ -38,7 +38,6 @@
3838
<img src="assets/fast.gif" width="50%"/>
3939
</p>
4040

41-
4241
---
4342

4443
## 安装
@@ -87,24 +86,25 @@ import Carousel from "react-native-reanimated-carousel";
8786

8887
## Props
8988

90-
| name | required | default | types | description |
91-
| ----------------------- | -------- | --------------- | ------------------------------------------- | ----------------------------------------------------------------------- |
92-
| data | ✅ | | T[] | 即将渲染的数据集合 |
93-
| width | ✅ | | number | 轮播图容器的宽度 |
94-
| renderItem | ✅ | | (data: T, index: number) => React.ReactNode | 渲染元素的方法 |
95-
| autoPlay | ❌ | false | boolean | 是否自动播放 |
96-
| autoPlayReverse | ❌ | false | boolean | 是否倒序自动播放 |
97-
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | 自动播放的间隔 |
98-
| mode | ❌ | defalut | 'default'\|'parallax' | 轮播图播放模式，`default`为默认无任何 UI 效果，演示图片使用的`parallax` |
99-
| loop | ❌ | true | boolean | 是否循环播放 |
100-
| parallaxScrollingOffset | ❌ | 100 | number | 当使用 mode=`parallax`,这个属性可以控制两侧图片离中间元素的距离 |
101-
| parallaxScrollingScale | ❌ | 0.8 | number | 当使用 mode=`parallax`,这个属性可以控制两侧图片的缩放比例 |
102-
| style | ❌ | {} | ViewStyle | 轮播图容器样式 |
103-
| height | ❌ | '100%' | undefined \| string \| number | 指定轮播图容器高度 |
104-
| timingConfig | ❌ | {duration: 250} | Animated.WithTimingConfig | 配置动画效果 |
105-
| onSnapToItem | ❌ | | (index: number) => void | 切换至另一张轮播图时触发 |
106-
| onScrollBegin | ❌ | | () => void | 切换动画开始时触发 |
107-
| onScrollEnd | ❌ | | (previous: number, current: number) => void | 切换动画结束时触发 |
89+
| name | required | default | types | description |
90+
| ----------------------- | -------- | --------------- | -------------------------------------------------------------- | ----------------------------------------------------------------------- |
91+
| data | ✅ | | T[] | 即将渲染的数据集合 |
92+
| width | ✅ | | number | 轮播图容器的宽度 |
93+
| renderItem | ✅ | | (data: T, index: number) => React.ReactNode | 渲染元素的方法 |
94+
| autoPlay | ❌ | false | boolean | 是否自动播放 |
95+
| autoPlayReverse | ❌ | false | boolean | 是否倒序自动播放 |
96+
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | 自动播放的间隔 |
97+
| mode | ❌ | defalut | 'default'\|'parallax' | 轮播图播放模式，`default`为默认无任何 UI 效果，演示图片使用的`parallax` |
98+
| loop | ❌ | true | boolean | 是否循环播放 |
99+
| parallaxScrollingOffset | ❌ | 100 | number | 当使用 mode=`parallax`,这个属性可以控制两侧图片离中间元素的距离 |
100+
| parallaxScrollingScale | ❌ | 0.8 | number | 当使用 mode=`parallax`,这个属性可以控制两侧图片的缩放比例 |
101+
| style | ❌ | {} | ViewStyle | 轮播图容器样式 |
102+
| height | ❌ | '100%' | undefined \| string \| number | 指定轮播图容器高度 |
103+
| timingConfig | ❌ | {duration: 250} | Animated.WithTimingConfig | 配置动画效果 |
104+
| onSnapToItem | ❌ | | (index: number) => void | 切换至另一张轮播图时触发 |
105+
| onScrollBegin | ❌ | | () => void | 切换动画开始时触发 |
106+
| onScrollEnd | ❌ | | (previous: number, current: number) => void | 切换动画结束时触发 |
107+
| panGestureHandlerProps | ❌ | {} | Omit<Partial\<PanGestureHandlerProps\>,'onHandlerStateChange'> | PanGestureHandler props |
108108

109109
## Ref
110110

‎src/Carousel.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,10 @@ export interface ICarouselProps<T extends unknown> {
101101
/**
102102
* PanGestureHandler props
103103
*/
104-
handlerProps?: Omit<PanGestureHandlerProps, 'onHandlerStateChange'>;
104+
panGestureHandlerProps?: Omit<
105+
Partial<PanGestureHandlerProps>,
106+
'onHandlerStateChange'
107+
>;
105108
}
106109

107110
export interface ICarouselInstance {
@@ -143,7 +146,7 @@ function Carousel<T extends unknown = any>(
143146
onSnapToItem,
144147
style,
145148
timingConfig = defaultTimingConfig,
146-
handlerProps,
149+
panGestureHandlerProps = {},
147150
} = props;
148151
const lockController = useLockController();
149152
const handlerOffsetX = useSharedValue<number>(0);
@@ -370,8 +373,8 @@ function Carousel<T extends unknown = any>(
370373

371374
return (
372375
<PanGestureHandler
376+
{...panGestureHandlerProps}
373377
onHandlerStateChange={animatedListScrollHandler}
374-
{...handlerProps}
375378
>
376379
<Animated.View
377380
style={[

0 commit comments

Comments
 (0)