728x90
반응형
좌우, 상하의 스크롤시에 해당 스와이프 유무를 체크하기 위한 훅
import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
export function useSwipe(
onSwipeLeft?: any,
onSwipeRight?: any,
rangeOffset = 4,
) {
let firstTouch = 0;
function onTouchStart(e: any) {
firstTouch = e.nativeEvent.pageX;
}
function onTouchEnd(e: any) {
const positionX = e.nativeEvent.pageX;
const range = windowWidth / rangeOffset;
if (positionX - firstTouch > range) {
onSwipeRight && onSwipeRight();
} else if (firstTouch - positionX > range) {
onSwipeLeft && onSwipeLeft();
}
}
return { onTouchStart, onTouchEnd };
}
사용은
export const IntroModal = ({ isVisible, onClose }: IntroModalProps) => {
const { onTouchStart, onTouchEnd } = useSwipe(onSwipeLeft, onSwipeRight, 15);
function onSwipeLeft() {
console.log('IntroModal SWIPE_LEFT');
onClose();
}
function onSwipeRight() {
console.log('IntroModal SWIPE_RIGHT');
}
return (
<Modal
isVisible={isVisible}
animationIn={'slideInLeft'}
animationOut={'slideOutLeft'}
style={styles.modal}
>
<ScrollView
onTouchStart={onTouchStart}
onTouchCancel={onTouchEnd}
onTouchEnd={onTouchEnd}
style={{ flex: 1, backgroundColor: 'blue' }}
pagingEnabled
>
<View
style={{
backgroundColor: 'blue',
flex: 1,
width: deviceWidth,
height: deviceHeight,
}}
></View>
<View
style={{
backgroundColor: 'red',
flex: 1,
width: deviceWidth,
height: deviceHeight,
}}
></View>
<View
style={{
backgroundColor: 'yellow',
flex: 1,
width: deviceWidth,
height: deviceHeight,
}}
></View>
</ScrollView>
</Modal>
);
};
이런식으로하면 된다.
ScrollView pagingEabled 에서 상하를 판독하고,
hook에서 좌우를 판독함
onTouchEnd 에서 가끔 failed 가 뜨기에
onTouchCancel에 도 넣어주니 정상 작동한다.
728x90
반응형
