react-native ScrollView in View ?

'ScrollView' 컴포넌트의 'onScroll' prop을 이용하여 스크롤 이벤트를 감지하고 처리할 수 있습니다. 'onScroll' 이벤트는 사용자가 스크롤할 때마다 발생하며, 스크롤 이벤트에 대한 정보를 포함하는 객체를 제공합니다. 이 객체를 통해 현재 스크롤 위치를 알 수 있습니다. 예를 들어, 스크롤이 시작되는 순간의 위치를 감지하려면 아래와 같이 코드를 작성할 수 있습니다: 'event.nativeEvent.contentOffset.x'를 이용하면 현재 스크롤 위치를 알 수 있습니다. 페이지 당 너비('deviceWidth')를 알고 있다면, 이 위치를 이용하여 현재 보여지고 있는 페이지의 인덱스를 계산할 수 있습니다. 'Math.round()'를 이용하여 가장 가까운 페이지 인덱스를 얻을 수 있습니다. 위 코드에서 'scrollEventThrottle={16}'는 onScroll 이벤트가 얼마나 자주 발생할지를 제어하는 prop입니다. 16은 약 60fps를 의미하며, 스크롤 이벤트가 매우 빠르게 발생하도록 설정한 것입니다. 이 값은 애플리케이션의 요구사항에 따라 조절할 수 있습니다. 다만 이 방식은 스크롤 이동이 끝난 후의 위치를 기준으로 인덱스를 계산하므로, 스크롤이 진행 중일 때는 정확한 인덱스를 얻기 어려울 수 있습니다. 스크롤 이동이 완전히 끝났을 때 현재 페이지의 인덱스를 얻고 싶다면 'onMomentumScrollEnd' prop을 사용할 수 있습니다. 이 이벤트는 스크롤 이동이 완전히 멈춘 후에 발생합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ScrollView
    horizontal
    pagingEnabled
    showsHorizontalScrollIndicator={false}
    contentContainerStyle={styles.temperature}
    onScroll={(event) => {
        const scrollPosition = event.nativeEvent.contentOffset.x;
        const index = Math.round(scrollPosition / deviceWidth); // deviceWidth는 페이지의 너비를 나타냅니다.
        console.log("index", index);
    }}
    scrollEventThrottle={16} // onScroll 이벤트 발생 주기 설정. 16은 약 60fps를 의미합니다.
>
    {days.map((item, i) => (
        <View key={i} style={styles.day}>
            <Text style={{ fontSize: 100, fontWeight: "bold" }}>
                {`${parseFloat(item.temp.day).toFixed(1)}º`}
            </Text>
        </View>
    ))}
</ScrollView>