Анимация React Native работает только в том случае, если состояние true с помощью useEffect. - PullRequest
Новая
       15

Анимация React Native работает только в том случае, если состояние true с помощью useEffect.

0 голосов
/ 25 марта 2020

Я пытаюсь создать аккордеонный компонент с анимированным API и хуком useEffect, но анимация работает только при расширенном состоянии true. При расширенном состоянии ложный компонент закрывается сам, но без анимации. Как я могу заставить эту анимацию работать в обоих состояниях? 

const [expanded, setExpanded] = useState(false);
useEffect(() => {
        console.log(expanded ? "150" : "0",);
        Animated.parallel([
            Animated.timing(animatedBGColor, {
                toValue: expanded ? 150 : 0,
                easing: Easing.linear,
                duration: 200,
            }),
            Animated.spring(animatedRotation, {
                toValue: expanded ? 1 : 0,
                tension: 100,
                friction: 9,
            }),
            Animated.timing(animatedHeight, {
                toValue: expanded ?  (lineHeight + (scaleHeight(15) * 2)) : 0,
                easing: Easing.linear,
                duration: 200,
            }),
            Animated.timing(animatedMargin, {
                toValue: expanded ? scaleHeight(15) : 0,
                duration: 200,
            })
        ]).start()
    }, [expanded]);

Я меняю состояние с помощью этой кнопки 

<AnimatedTouchable onPress={() => setExpanded(!expanded)}
...