Перейти к содержанию

useScrollViewOffset

Эта страница была перенесена из старой версии документации.

В процессе переписывания документации некоторые страницы могут быть немного устаревшими.

Этот хук позволяет создавать анимацию на основе смещения ScrollView. Хук автоматически определяет, является ли ScrollView горизонтальным или вертикальным.

1
useScrollViewOffset(aref: RefObject<Animated.ScrollView>) => [SharedValue<number>]

Аргументы

aref [RefObject<Animated.ScrollView>]

Анимированная ссылка на ScrollView. Ссылка должна быть передана соответствующему ScrollView в свойстве ref.

Возвращает

Общее значение, содержащее текущее смещение ScrollView.

Пример

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function ScrollViewOffsetExample() {
    const aref = useAnimatedRef<Animated.ScrollView>();
    const scrollHandler = useScrollViewOffset(aref);

    useAnimatedStyle(() => {
        console.log(scrollHandler.value);
        return {};
    });

    return (
        <>
            <View style={styles.positionView}>
                <Text>Test</Text>
            </View>
            <View style={styles.divider} />
            <Animated.ScrollView
                ref={aref}
                style={styles.scrollView}
            >
                {[...Array(100)].map((_, i) => (
                    <Text key={i} style={styles.text}>
                        {i}
                    </Text>
                ))}
            </Animated.ScrollView>
        </>
    );
}

Ссылки

Комментарии