useAnimatedRef¶

Функция useAnimatedRef позволяет получить ссылку на представление. Используется совместно с функциями measure, scrollTo и useScrollViewOffset.

Объект, определенный с помощью useAnimatedRef, должен быть передан в свойство ref компонента.

Описание¶

1
2
3
4
5
6
7

import { useAnimatedRef } from 'react-native-reanimated';

function App() {
    const animatedRef = useAnimatedRef();

    return <Animated.View ref={animatedRef} />;
}

1
2
3

function useAnimatedRef<T extends Component>(): AnimatedRef<
    T
>;

Аргументы¶

useAnimatedRef не принимает никаких аргументов.

Возвращает¶

useAnimatedRef возвращает объект со свойством current, содержащий экземпляр компонента.

Пример¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

export default function App() {
    const animatedRef = useAnimatedRef();

    return (
        <View style={styles.container}>
            <Animated.View
                ref={animatedRef}
                style={styles.box}
                onLayout={() => {
                    // Returns a reference to the component
                    const component = animatedRef.current;
                }}
            />
        </View>
    );
}

Замечания¶

• С помощью useAnimatedRef можно ссылаться не только на анимированные версии компонентов, но и на любой компонент React Native.

• Значение, хранящееся в свойстве current, становится доступным после установки компонента.

  1 2 3 4 5 6 7 8 9 10 11

  function App() { const animatedRef = useAnimatedRef(); console.log(animatedRef.current); // 🚩 Возвращается null useEffect(() => { console.log(animatedRef.current); // ✅ Возвращает компонент }, []); return <View ref={animatedRef} />; }

  В качестве альтернативы можно получить значение, хранящееся в current, в обработчиках событий или в свойстве onLayout.

• Значение, хранящееся в свойстве current, недоступно в UI thread.

Совместимость с платформами¶

Ссылка¶

• useAnimatedRef

Комментарии