React-Native에서는 다음과 같이 ScrollView로 슬라이더를 구현할 수 있다. 👍
<Animated.ScrollView
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
onScrollEndDrag={handleCurrentChange}>
{/* ...items */}
</Animated.ScrollView>
import Animated from 'react-native-reanimated';
handleCurrentChange
를 넘겨주었고, 이 함수에서는 현재 페이지를 나타내는 state인 current를 변경한다. const handleCurrentChange = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
const nextCurrent: number = Math.floor(
e.nativeEvent.contentOffset.x / width,
);
if (nextCurrent < 0) {
return;
}
setCurrent(nextCurrent);
};
NativeSyntheticEvent<NativeScrollEvent>
이다.import {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
e.nativeEvent.contentOffset.x
는 전체 스크롤뷰에서 현재 보여지는 페이지가 시작하는 x좌표이다.const nextCurrent: number = Math.floor(
e.nativeEvent.contentOffset.x / width,
);
이를 통해 정수인 현재 페이지(current)를 계산하고, 이 때 첫 페이지는 0이 된다. (current는 생략된 코드 위에 선언했다: const [current, setCurrent] = useState(0);
)
width는 슬라이더에서 한 페이지에 해당하는 컨텐츠의 width로, 나의 경우 슬라이더가 화면 너비의 100%를 차지 하기 때문에 아래와 같이 구해주었다.
import {Dimensions} from 'react-native';
const {width, height} = Dimensions.get('window');
✨ (21.3.29) update
e.nativeEvent.layoutMeasurement.width
: handleCurrentChange에서 e로 부터 layout의 한페이지에 해당하는 width를 알 수 있다
스크롤 뷰의 children 컴포넌트({/* ...items */}
)인 각 아이템들의 width는 위 2번에서 nextCurrent를 구할 때 나눠준 width값과 같게 해주어야 current가 알맞게 구해진다.