Question

在我的本机应用程序中，我正在尝试创建一个抽屉。当我点击一个按钮它应该打开，并且完全正常，问题是当我关闭它。当我点击关闭按钮时，动画会闪烁，有点像打开和关闭2-3次，然后肯定会关闭。

我正在这样做

export default class Drawer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            height: new Animated.Value(0)
        }
    }

    showContent = () => {
        Animated.spring(this.state.height, {toValue:130}).start();
    }

    hideContent = () => {
        Animated.spring(this.state.height, {toValue:0}).start();
    }

    render() {
        return (
            <View>
                <TouchableHighlight 
                    onPress={this.showContent}
                    underlayColor="transparent"
                >
                    <Text>Show</Text>
                </TouchableHighlight>

                <TouchableHighlight 
                    onPress={this.hideContent}
                    underlayColor="transparent"
                >
                    <Text>Hide</Text>
                </TouchableHighlight>

                <Animated.View style={{height: this.state.height}}>
                    <Text>Content</Text>
                </Animated.View>
            </View>
        );
    }
}

Answer 1

刚遇到同样的问题。你仍然可以使用Animated.spring，但它需要额外的＆＃34;摆动空间＆＃34;正确的最小高度。似乎它可能会有所不同，在我的情况下，最大高度为55，最小高度为2。

Answer 2

动画显示为“闪烁”的原因是因为您使用的是弹簧动画，一旦达到最终值就会反弹或反弹。尝试用spring替换timing以摆脱反弹：

showContent = () => {
    Animated.timing(this.state.height, {toValue:130}).start();
}

hideContent = () => {
    Animated.timing(this.state.height, {toValue:0}).start();
}

Answer 3

我已经很晚了，但我遇到了这个问题并通过使用config bounciness: 0来完全禁用闪烁来解决这个问题。

您可以找到有关in the documentation的更多信息。

React Native - 恢复动画时Animated.spring闪烁

3 个答案: