Animated.View 仅适用于展开，不适用于折叠答案

【问题标题】：Animated.View only works on expanding, not on collapsingAnimated.View 仅适用于展开，不适用于折叠
【发布时间】：2021-04-07 15:03:37
【问题描述】：

我在使用 <Animated.View /> 时遇到问题。以下仅适用于 toValue 设置为 40 时。它很好地扩展并且动画有效。在折叠时（将toValue 设置为0），它只是混合出来 - 好像可见性设置为none。这是为什么呢？

const Foo = () => {
    const [bounceValue, setBounceValue] = useState(new Animated.Value(0));
    const [collapsed, setCollapsed] = useState(true);
    const height = { height: bounceValue };
    
    const _slideInOut = () => {
        let toValue;
        if (collapsed) {
            toValue = 40;
            setCollapsed(false);
        } else {
            toValue = 0;
            setCollapsed(true);
        }
        Animated.timing(bounceValue, {
            toValue: toValue,
            duration: 400,
            useNativeDriver: false
        }).start();
    }

    return <TouchableOpacity
        activeOpacity={1}
        style={[
            styles.container,
            ...
        ]}
        onPress={() => _slideInOut()}>
        <Animated.View
            style={[
                height,
                styles.menu,
            ]}>
            ...
        </Animated.View>
    </TouchableOpacity>
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        top: 0,
        height: 10,
        position: 'absolute',
    },
    menu: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: 'white',
        position: 'absolute',
        top: 10,
        width: '100%'
    }
})

【问题讨论】：

你在哪里将动画中的值设置为 0？我只看到Animated.timing 40。
@Konstantin 这是一个错字，抱歉。我在 Q 中更正了它。

标签： javascript react-native animation mobile react-animated

【解决方案1】：

您想为此使用 ref：

const bounceValue = useRef(new Animated.Value(0)).current;

【讨论】：