어떻게 부모 컨테이너에서 스크롤 제스처를 내부 콘텐츠로 전달할 수 있나요?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

React Native 앱 개발자, 특히 모달/스크롤 제스처 구현에 어려움을 겪는 개발자

핵심 요약

• PanResponder 제스처 감지 로직 수정으로 부모 컨테이너 상단 도달 시 자동 스크롤 전환 가능
• scrollEnabled 상태를 부모 컨테이너 위치에 따라 동적으로 조절하여 콘텐츠 스크롤 활성화
• ScrollView 참조(scrollViewRef)를 사용해 제스처 이동량을 내부 스크롤에 전달

섹션별 세부 요약

1. 문제 정의 및 현황

• 현재 구현: 부모 컨테이너를 상단으로 스와이프 후 손가락 들어올림 필수로 내부 콘텐츠 스크롤 가능
• 원하는 기능: 부모 컨테이너 상단 도달 시 자동으로 내부 콘텐츠 스크롤 전환
• 동일한 문제 발생: 내부 콘텐츠 닫기 시에도 손가락 들어올림 필요

2. 현재 코드 구조

• PanResponder 사용:

- onMoveShouldSetPanResponder: 제스처 감지 조건 설정

- onPanResponderMove: 부모 컨테이너 위치 업데이트 및 scrollEnabled 상태 조정

- onPanResponderRelease: 위치 복귀 및 네비게이션 처리

• Animated.Value로 부모 컨테이너 이동 처리
• scrollViewRef 사용 예약(현재 코드에서 활용되지 않음)

3. 핵심 해결 전략

• 제스처 이동량 전달: 부모 컨테이너 상단 도달 시 scrollViewRef를 통해 내부 ScrollView에 직접 스크롤 이동량 전달
• scrollEnabled 동적 조절: 부모 컨테이너 위치(<=0)에 따라 scrollEnabled={isScrollEnabled} 상태 동적으로 변경
• 제스처 방해 제거: onMoveShouldSetPanResponder에서 부모 컨테이너 상단 도달 시 제스처를 내부 ScrollView로 전달하도록 조건 수정

결론

• scrollViewRef를 사용해 내부 ScrollView의 scrollTo 메서드를 직접 호출하여 제스처 이동량 전달
• onMoveShouldSetPanResponder에서 gestureState.dy > 0 && newPosition <=0 조건 시 제스처를 내부 ScrollView로 전달하도록 수정
• scrollEnabled={isScrollEnabled} 상태를 position <=0 조건에 따라 동적으로 조절하여 내부 스크롤 활성화/비활성화 관리