Carousel + React native Javascript

스크롤 화면을 만들고싶을경우가 있다.

그럴경우 간단한 라이브러리를 이용하여 구현할수있다.

*Carousel 소개

npm install react-native-reanimated-carousel

또는

npm install react-native-reanimated-carousel

그다음

react-native-gesutre-handler 설치+ react-native-reaniated 설치가 필요하다

버전에 따라서 틀리니 참고하길..

 

 

	react-native-reanimated	react-native-gesture-handler
react-native-reanimated-carousel < v3	<2.7.0	*
react-native-reanimated-carousel >= v3	>=2.7.0	*

 

사용법

function Index() {
    const width = Dimensions.get('window').width;
    return (
        <View style={{ flex: 1 }}>
            <Carousel
                loop
                width={width}
                height={width / 2}
                autoPlay={true}
                data={[...new Array(6).keys()]}
                scrollAnimationDuration={1000}
                onSnapToItem={(index) => console.log('current index:', index)}
                renderItem={({ index }) => (
                    <View
                        style={{
                            flex: 1,
                            borderWidth: 1,
                            justifyContent: 'center',
                        }}
                    >
                        <Text style={{ textAlign: 'center', fontSize: 30 }}>
                            {index}
                        </Text>
                    </View>
                )}
            />
        </View>
    );
}

*Props Github link

https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md