Skip to content

Commit 66e8f0f

Browse files
committed
docs: update example
1 parent f406258 commit 66e8f0f

File tree

2 files changed

+67
-12
lines changed

2 files changed

+67
-12
lines changed

README.md

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,42 @@ Now we need to install [`react-native-gesture-handler`](https://github.com/kmagi
8383
## Usage
8484

8585
```tsx
86+
import * as React from 'react';
87+
import { Dimensions, Text, View } from 'react-native';
8688
import Carousel from 'react-native-reanimated-carousel';
8789

88-
<Carousel
89-
width={300}
90-
height={150}
91-
data={[1, 2, 3]}
92-
renderItem={({ item }) => <AnyElement />}
93-
/>;
90+
function Index() {
91+
const width = Dimensions.get('window').width;
92+
return (
93+
<View style={{ flex: 1 }}>
94+
<Carousel
95+
loop
96+
width={width}
97+
height={width / 2}
98+
autoPlay={true}
99+
data={[...new Array(6).keys()]}
100+
scrollAnimationDuration={1000}
101+
onSnapToItem={(index) => console.log('current index:', index)}
102+
renderItem={({ index }) => (
103+
<View
104+
style={{
105+
flex: 1,
106+
borderWidth: 1,
107+
justifyContent: 'center',
108+
}}
109+
>
110+
<Text style={{ textAlign: 'center', fontSize: 30 }}>
111+
{index}
112+
</Text>
113+
</View>
114+
)}
115+
/>
116+
</View>
117+
);
118+
}
119+
120+
export default Index;
121+
94122
```
95123

96124
## Tips

README.zh-CN.md

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,41 @@ npm install react-native-reanimated-carousel
8383
## 使用
8484

8585
```tsx
86+
import * as React from 'react';
87+
import { Dimensions, Text, View } from 'react-native';
8688
import Carousel from 'react-native-reanimated-carousel';
8789

88-
<Carousel
89-
width={300}
90-
height={150}
91-
data={[1, 2, 3]}
92-
renderItem={({ item }) => <AnyElement />}
93-
/>;
90+
function Index() {
91+
const width = Dimensions.get('window').width;
92+
return (
93+
<View style={{ flex: 1 }}>
94+
<Carousel
95+
loop
96+
width={width}
97+
height={width / 2}
98+
autoPlay={true}
99+
data={[...new Array(6).keys()]}
100+
scrollAnimationDuration={1000}
101+
onSnapToItem={(index) => console.log('current index:', index)}
102+
renderItem={({ index }) => (
103+
<View
104+
style={{
105+
flex: 1,
106+
borderWidth: 1,
107+
justifyContent: 'center',
108+
}}
109+
>
110+
<Text style={{ textAlign: 'center', fontSize: 30 }}>
111+
{index}
112+
</Text>
113+
</View>
114+
)}
115+
/>
116+
</View>
117+
);
118+
}
119+
120+
export default Index;
94121
```
95122

96123
## 提示

0 commit comments

Comments
 (0)