#reactjs #react-native #animation
Вопрос:
Как мне анимировать высоту некоторого произвольного дочернего контента в react-native?
Я могу сделать это, как показано ниже, но только тогда, когда я жестко закодирую рост детей. Как я могу избежать жесткого указания роста детей?
Может быть, я могу оживить какое-нибудь свойство flex? Где задокументированы все атрибуты анимируемого стиля?
import React, { useEffect, useRef } from "react"; import { Animated } from "react-native"; export function AnimateHeight({ children, isActive, }: { children: JSX.Element; isActive: boolean; }) { const anim = useRef(new Animated.Value(isActive ? 1 : 0)).current; const baseAnimOpts = { useNativeDriver: false, duration: 200 }; const self = useRef({ fadeIn: () =gt; Animated.timing(anim, { toValue: 1, ...baseAnimOpts }).start(), fadeOut: () =gt; Animated.timing(anim, { toValue: 0, ...baseAnimOpts }).start(), }).current; useEffect(() =gt; { if (isActive) return self.fadeIn(); self.fadeOut(); }, [isActive]); return ( lt;Animated.View style={{ height: anim.interpolate({ inputRange: [0, 1], // How do I avoid hard coding this value? 👇 outputRange: [0, 250], }), }} gt; {children} lt;/Animated.Viewgt; ); }