react native 탭 선택시 해당 스크롤로 이동

안녕하세요! 2번째 사진에 있는 목록 리스트 View로 래핑된 컴포넌트 (marginVertical: 35 있는 컴포넌트)를 ScrollView 컴포넌트로 감싸고 ref 설정하신 뒤에 scrollTo를 해도 안되는건가요? ex) <ScrollView ref={scrollViewRef}> <View style={{ marginVertical: 35 }}> ... 생략 </View> </ScrollView> // scroll 기능 함수에서 scrollViewRef.current.scrollTo();

React Native에서 스크롤 위치를 조정하는 가장 쉬운 방법 중 하나는 ' scrollTo ' 메서드를 사용하는 것입니다. 다음과 같은 방법으로 스크롤 위치를 이동할 수 있습니다. 1. 스크롤뷰에 ref를 설정합니다. 2. 탭 클릭 시 'scrollTo ' 메서드를 호출하여 스크롤 위치를 이동합니다. 위 코드에서 ' ITEM_HEIGHT '는 스크롤뷰 내의 아이템 하나의 높이를 나타내며, ' index '는 이동할 위치를 결정하는 변수입니다. ' scrollTo ' 메서드의 ' y ' 옵션에는 이동할 위치가 픽셀 단위로 설정됩니다. 따라서 ' index * ITEM_HEIGHT '로 픽셀 단위로 이동할 위치를 계산합니다. 또한, 이전에 스크롤 이벤트를 사용하여 이동하려 했다면, 스크롤 이벤트가 지연될 수 있어서 제대로 이동하지 못하는 경우가 있을 수 있습니다. 따라서 ' scrollTo ' 메서드를 사용하는 것이 더 안정적입니다.

1
2
3
4
5
6
7
8
9
#1
<ScrollView ref={(ref) => { this.scrollView = ref; }}>
  // 스크롤뷰 내용
</ScrollView>

#2
onTabPress = (index) => {
  this.scrollView.scrollTo({ y: index * ITEM_HEIGHT });
}