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

scrollTo

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

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

Обеспечивает синхронную прокрутку в потоке UI до заданного смещения с использованием анимированной ссылки на представление прокрутки. Это позволяет выполнять плавную прокрутку без задержек (которые могли бы возникнуть при асинхронной прокрутке, основанной на множестве событий).

Аргументы

animatedRef

Продукт useAnimatedRef, который является расширением Reanimated стандартного React ref (доставляет тег view в потоке UI).

x [Float]

Соответствует пикселю вдоль горизонтальной оси элемента, который вы хотите отобразить в левом верхнем углу.

y [Float]

Соответствует пикселю вдоль вертикальной оси элемента, который нужно отобразить в левом верхнем углу.

animated [Boolean]

Указывает, должна ли прокрутка быть плавной (true) или мгновенной (false).

Возвращает

void

Пример

  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
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
import React from 'react';
import {
    TouchableOpacity,
    View,
    Text,
    ScrollView,
} from 'react-native';
import {
    useAnimatedRef,
    useDerivedValue,
    useSharedValue,
    scrollTo,
} from 'react-native-reanimated';

const ITEM_COUNT = 10;
const ITEM_SIZE = 100;
const ITEM_MARGIN = 10;

export const Comp = () => {
    const aref = useAnimatedRef();
    const scroll = useSharedValue(0);

    useDerivedValue(() => {
        scrollTo(
            aref,
            0,
            scroll.value * (ITEM_SIZE + 2 * ITEM_MARGIN),
            true
        );
    });

    const items = Array.from(Array(ITEM_COUNT).keys());

    const Incrementor = ({ increment }) => (
        <View
            style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
            <TouchableOpacity
                onPress={() => {
                    scroll.value =
                        scroll.value + increment > 0
                            ? scroll.value + increment
                            : ITEM_COUNT - 1 + increment;

                    if (scroll.value >= ITEM_COUNT - 2)
                        scroll.value = 0;
                }}
            >
                <Text>{`Scroll ${Math.abs(increment)} ${
                    increment > 0 ? 'down' : 'up'
                }`}</Text>
            </TouchableOpacity>
        </View>
    );

    return (
        <View style={{ flex: 1, flexDirection: 'column' }}>
            <Incrementor increment={1} />
            <View
                style={{
                    width: '100%',
                    height:
                        (ITEM_SIZE + 2 * ITEM_MARGIN) * 2,
                }}
            >
                <ScrollView
                    ref={aref}
                    style={{ backgroundColor: 'orange' }}
                >
                    {items.map((_, i) => (
                        <View
                            key={i}
                            style={{
                                backgroundColor: 'white',
                                aspectRatio: 1,
                                width: ITEM_SIZE,
                                margin: ITEM_MARGIN,
                                justifyContent: 'center',
                                alignContent: 'center',
                            }}
                        >
                            <Text
                                style={{
                                    textAlign: 'center',
                                }}
                            >
                                {i}
                            </Text>
                        </View>
                    ))}
                </ScrollView>
            </View>

            <Incrementor increment={-1} />
        </View>
    );
};

Ссылки

Комментарии