File tree Expand file tree Collapse file tree 2 files changed +67
-12
lines changed Expand file tree Collapse file tree 2 files changed +67
-12
lines changed Original file line number Diff line number Diff 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' ;
8688import 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
Original file line number Diff line number Diff 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' ;
8688import 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## 提示
You can’t perform that action at this time.
0 commit comments