개발자
react-native ScrollView in View ?
안녕하세요, 리액트네이티브 공부중에 있습니다 ScrollView 안에 View를 사용할 때 View를 스크롤 하면 이벤트를 호출하고 싶은데 onPress 등등 아무것도 안먹네요 ㅠㅠ Touchable은 작동하긴 한데, 클릭을 하면 실행되는데 스와이프 할때는 실행 안하네요 코드 첨부합니다 하고 싶은 기능: 스크롤 하나씩 할 때마다 인덱스값을 받고 싶어요
1<ScrollView
2 horizontal
3 pagingEnabled
4 showsHorizontalScrollIndicator={false}
5 contentContainerStyle={styles.temperature}
6 onScrollBeginDrag={() => getDate()}
7 >
8 {days.map((item, i) => (
9 <TouchableOpacity
10 key={i}
11 style={styles.day}
12 onLongPress={() => console.log("i", i)} //여기서 스크롤 할 때마다 i값을 출력하고 싶어요
13 >
14 <Text style={{ fontSize: 100, fontWeight: "bold" }}>
15 {`${parseFloat(item.temp.day).toFixed(1)}º`}
16 </Text>
17 </TouchableOpacity>
18 )}
19 </ScrollView>
답변 1
'ScrollView' 컴포넌트의 'onScroll' prop을 이용하여 스크롤 이벤트를 감지하고 처리할 수 있습니다. 'onScroll' 이벤트는 사용자가 스크롤할 때마다 발생하며, 스크롤 이벤트에 대한 정보를 포함하는 객체를 제공합니다. 이 객체를 통해 현재 스크롤 위치를 알 수 있습니다. 예를 들어, 스크롤이 시작되는 순간의 위치를 감지하려면 아래와 같이 코드를 작성할 수 있습니다: 'event.nativeEvent.contentOffset.x'를 이용하면 현재 스크롤 위치를 알 수 있습니다. 페이지 당 너비('deviceWidth')를 알고 있다면, 이 위치를 이용하여 현재 보여지고 있는 페이지의 인덱스를 계산할 수 있습니다. 'Math.round()'를 이용하여 가장 가까운 페이지 인덱스를 얻을 수 있습니다. 위 코드에서 'scrollEventThrottle={16}'는 onScroll 이벤트가 얼마나 자주 발생할지를 제어하는 prop입니다. 16은 약 60fps를 의미하며, 스크롤 이벤트가 매우 빠르게 발생하도록 설정한 것입니다. 이 값은 애플리케이션의 요구사항에 따라 조절할 수 있습니다. 다만 이 방식은 스크롤 이동이 끝난 후의 위치를 기준으로 인덱스를 계산하므로, 스크롤이 진행 중일 때는 정확한 인덱스를 얻기 어려울 수 있습니다. 스크롤 이동이 완전히 끝났을 때 현재 페이지의 인덱스를 얻고 싶다면 'onMomentumScrollEnd' prop을 사용할 수 있습니다. 이 이벤트는 스크롤 이동이 완전히 멈춘 후에 발생합니다.
1<ScrollView
2 horizontal
3 pagingEnabled
4 showsHorizontalScrollIndicator={false}
5 contentContainerStyle={styles.temperature}
6 onScroll={(event) => {
7 const scrollPosition = event.nativeEvent.contentOffset.x;
8 const index = Math.round(scrollPosition / deviceWidth); // deviceWidth는 페이지의 너비를 나타냅니다.
9 console.log("index", index);
10 }}
11 scrollEventThrottle={16} // onScroll 이벤트 발생 주기 설정. 16은 약 60fps를 의미합니다.
12>
13 {days.map((item, i) => (
14 <View key={i} style={styles.day}>
15 <Text style={{ fontSize: 100, fontWeight: "bold" }}>
16 {`${parseFloat(item.temp.day).toFixed(1)}º`}
17 </Text>
18 </View>
19 ))}
20</ScrollView>커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!