Skip to content

Commit cc12467

Browse files
dohooodohooo
committed
update README
1 parent 7da4dfb commit cc12467

File tree

10 files changed

+92
-103
lines changed

10 files changed

+92
-103
lines changed

‎README.md‎

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
English | [简体中文](./README.zh-CN.md)
22

33
# react-native-reanimated-carousel
4-
<img src="assets/54995FB4-3F72-48E4-BA5D-0A859D8EBD92.png" width="100%"/>
4+
5+
<img src="assets/54995FB4-3F72-48E4-BA5D-0A859D8EBD92.png" width="100%"/>
56

67
![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=flat-square&colorB=191A17)
78
[![npm](https://img.shields.io/npm/v/react-native-reanimated-carousel.svg?style=flat-square)](https://www.npmjs.com/package/react-native-reanimated-carousel)
@@ -10,17 +11,33 @@ English | [简体中文](./README.zh-CN.md)
1011
[![github closed issues](https://img.shields.io/github/issues-closed/dohooo/react-native-reanimated-carousel.svg?style=flat-square&colorB=44cc11)](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
1112

1213
<p align="center">
13-
<img width="300" src="./assets/example-01.gif">
14+
<img src="assets/normal.gif" width="300"/>
1415
</p>
1516

1617
<br/>
1718

18-
### 🎉 **Simple、Infinitely scrolling very smooth、Fully implemented using Reanimated 2!**
19+
## Reason
20+
21+
🎉 **Simple、Infinitely scrolling very smooth、Fully implemented using Reanimated 2!**
1922

2023
> The common RN infinite scroll component. It's common to get stuck on a fast slide. Wait for the next element to appear. This component will not have similar problems. That's why this library was created.
2124
2225
> At present, it only meets the needs of my work. Welcome to raise PR/ISSUES.[Try it with snack](https://snack.expo.dev/@zhaodonghao586/simple-carousel)
2326
27+
<p align="center">
28+
Use react-native-snap-carousel for quick swiping,you can see caton clearly when you reach the junction.(gif 4.6mb)
29+
</p>
30+
<p align="center">
31+
<img src="assets/react-native-snap-carousel.gif" width="50%"/>
32+
</p>
33+
34+
<p align="center">
35+
Compared with react-native-reanimated-carousel,The actual test was ten slides per second, but it didn't show up very well in gif.（gif 83mb）
36+
</p>
37+
<p align="center">
38+
<img src="assets/fast.gif" width="50%"/>
39+
</p>
40+
2441
---
2542

2643
## Installation
@@ -69,24 +86,24 @@ import Carousel from "react-native-reanimated-carousel";
6986

7087
## Props
7188

72-
| name | required | default | types | description |
73-
| ----------------------- | -------- | --------------- | ------------------------------------------- | ------------------------------------------------------------------------------ |
74-
| data | ✅ | | T[] | Carousel items data set |
75-
| width | ✅ | | number | Specified carousel container width |
76-
| renderItem | ✅ | | (data: T, index: number) => React.ReactNode | Render carousel item |
77-
| autoPlay | ❌ | false | boolean | Auto play |
78-
| autoPlayReverse | ❌ | false | boolean | Auto play reverse playback |
79-
| autoPlayInterval | ❌ | 1000 | autoPlayInterval | Auto play playback interval |
80-
| mode | ❌ | defalut | 'default'\|'parallax' | Carousel Animated transitions |
81-
| loop | ❌ | true | boolean | Carousel loop playback |
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 |
8299
| parallaxScrollingOffset | ❌ | 100 | number | When use 'parallax' Layout props,this prop can be control prev/next item offset |
83100
| parallaxScrollingScale | ❌ | 0.8 | number | When use 'parallax' Layout props,this prop can be control prev/next item scale |
84-
| style | ❌ | {} | ViewStyle | Carousel container style |
85-
| height | ❌ | '100%' | undefined \| string \| number | Specified carousel container height |
86-
| timingConfig | ❌ | {duration: 250} | Animated.WithTimingConfig | Timing config of translation animated |
87-
| onSnapToItem | ❌ | | (index: number) => void | Callback fired when navigating to an item |
88-
| onScrollBegin | ❌ | | () => void | Callback fired when scroll begin |
89-
| onScrollEnd | ❌ | | (previous: number, current: number) => void | Callback fired when scroll end |
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 |
90107

91108
## Ref
92109

‎README.zh-CN.md‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,34 @@
1111
[![github closed issues](https://img.shields.io/github/issues-closed/dohooo/react-native-reanimated-carousel.svg?style=flat-square&colorB=44cc11)](https://github.com/dohooo/react-native-reanimated-carousel/issues?q=is%3Aissue+is%3Aclosed)
1212

1313
<p align="center">
14-
<img width="300" src="./assets/example-01.gif">
14+
<img src="assets/normal.gif" width="300"/>
1515
</p>
1616

1717
<br/>
1818

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

2122
> 常见的无限滚动轮播图，在快速滑动时会出现卡住的情况，这是因为实现方式而导致的问题。这个组件用了不同的方式来实现，解决了这个问题，这就是创建这个库的原因。
2223
2324
> 目前他只满足了我工作上的需要，欢迎大家的 ISSUES/PR。[在 SNACK 上尝试](https://snack.expo.dev/@zhaodonghao586/simple-carousel)
2425
26+
27+
<p align="center">
28+
使用react-native-snap-carousel快速滑动，当到连接处时可以看清楚的看到卡顿。(gif 4.6mb)
29+
</p>
30+
<p align="center">
31+
<img src="assets/react-native-snap-carousel.gif" width="50%"/>
32+
</p>
33+
34+
<p align="center">
35+
使用react-native-reanimated-carousel对比,每秒滚动十张依然顺畅链接，无限滚动。这里使用了gif无法很清晰的看出。（gif 83mb）
36+
</p>
37+
<p align="center">
38+
<img src="assets/fast.gif" width="50%"/>
39+
</p>
40+
41+
2542
---
2643

2744
## 安装

‎assets/example-01.gif‎

-1.88 MB
Binary file not shown.

‎assets/fast.gif‎

85 MB
Loading

‎assets/normal.gif‎

24.6 MB
Loading

‎assets/react-native-snap-carousel.gif‎

4.4 MB
Loading

‎example/assets/carousel-0.jpg‎

1.04 MB
Loading

‎example/assets/carousel-1.jpg‎

1.28 MB
Loading

‎example/assets/carousel-2.jpg‎

1.1 MB
Loading

‎example/src/App.tsx‎

Lines changed: 37 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,74 @@
11
/* eslint-disable react-native/no-inline-styles */
22
import * as React from 'react';
3-
import { Alert, Button, Dimensions, Text, TextInput, View } from 'react-native';
4-
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
3+
import { Dimensions, Image, ImageSourcePropType, View } from 'react-native';
54
import { ICarouselInstance } from '../../src/Carousel';
65

76
import Carousel from '../../src/index';
87

98
const { width } = Dimensions.get('window');
109

11-
const data = [
12-
{ color: 'red' },
13-
{ color: 'purple' },
14-
{ color: 'blue' },
15-
{ color: 'yellow' },
10+
const data: ImageSourcePropType[] = [
11+
require('../assets/carousel-0.jpg'),
12+
require('../assets/carousel-1.jpg'),
13+
require('../assets/carousel-2.jpg'),
1614
];
1715

1816
export default function App() {
19-
const [index, setIndex] = React.useState<string>('');
2017
const r = React.useRef<ICarouselInstance | null>(null);
2118
return (
2219
<View
2320
style={{
2421
flex: 1,
2522
alignItems: 'center',
2623
backgroundColor: 'black',
24+
paddingTop: 100,
2725
}}
2826
>
2927
<View style={{ height: 300 }}>
30-
<Carousel<{ color: string }>
31-
onScrollBegin={() => {
32-
console.log('scroll start');
33-
}}
34-
onScrollEnd={(pre, current) => {
35-
console.log(
36-
'scroll end',
37-
'pre:',
38-
pre,
39-
'current:',
40-
current
41-
);
28+
<Carousel<ImageSourcePropType>
29+
autoPlay
30+
timingConfig={{ duration: 500 }}
31+
autoPlayInterval={2000}
32+
ref={r}
33+
width={width}
34+
data={data}
35+
parallaxScrollingScale={0.8}
36+
onSnapToItem={(i) => {
37+
console.log('current index:', i);
4238
}}
39+
renderItem={(source) => (
40+
<View style={{ flex: 1 }}>
41+
<Image
42+
source={source}
43+
style={{ width: '100%', height: '100%' }}
44+
/>
45+
</View>
46+
)}
47+
/>
48+
</View>
49+
<View style={{ height: 300 }}>
50+
<Carousel<ImageSourcePropType>
51+
autoPlay
4352
timingConfig={{ duration: 500 }}
4453
autoPlayInterval={2000}
4554
ref={r}
4655
mode="parallax"
4756
width={width}
4857
data={data}
49-
// loop={false}
5058
parallaxScrollingScale={0.8}
5159
onSnapToItem={(i) => {
5260
console.log('current index:', i);
5361
}}
54-
renderItem={({ color }, i) => {
55-
return (
56-
<View
57-
style={{
58-
backgroundColor: color,
59-
flex: 1,
60-
}}
61-
>
62-
<TouchableWithoutFeedback
63-
style={{ flex: 1 }}
64-
containerStyle={{ flex: 1 }}
65-
onPress={() => {
66-
console.log(color);
67-
}}
68-
>
69-
<View
70-
style={{
71-
flex: 1,
72-
backgroundColor: color,
73-
justifyContent: 'center',
74-
alignItems: 'center',
75-
}}
76-
>
77-
<Text style={{ fontSize: 80 }}>
78-
{i}
79-
</Text>
80-
</View>
81-
</TouchableWithoutFeedback>
82-
</View>
83-
);
84-
}}
62+
renderItem={(source) => (
63+
<View style={{ flex: 1 }}>
64+
<Image
65+
source={source}
66+
style={{ width: '100%', height: '100%' }}
67+
/>
68+
</View>
69+
)}
8570
/>
8671
</View>
87-
<Button
88-
title="pre"
89-
onPress={() => {
90-
r.current.prev();
91-
}}
92-
/>
93-
<Button
94-
title="next"
95-
onPress={() => {
96-
r.current.next();
97-
}}
98-
/>
99-
<TextInput
100-
placeholder={'Set go to index'}
101-
placeholderTextColor="white"
102-
style={{ color: 'white' }}
103-
value={index}
104-
onChangeText={setIndex}
105-
/>
106-
<Button
107-
title="GoTo"
108-
onPress={() => {
109-
const idx = Number(index);
110-
if (idx < 0 || idx >= data.length) {
111-
Alert.alert('invalid index');
112-
return;
113-
}
114-
r.current.goToIndex(idx, true);
115-
}}
116-
/>
11772
</View>
11873
);
11974
}

0 commit comments

Comments
 (0)