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

Question

我在使用 <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%'
    }
})

Answer 1

你想为此使用参考：

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

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

Animated.View only works on expanding, not on collapsing

javascript

mobile

animation

react-native

react-animated