反应原生Animated.spring不能正常工作

Question

我正在使用react native动画API从左到右位置进行平滑过渡。 这是我的初始状态

constructor(props) {
        super(props);
        this.state = {
            isDrawerOpened: false,
            left: new Animated.Value(-100)
        };
        this.setDrawer = this.setDrawer.bind(this);
    }

当componentDidMount调用时，它仍然可以正常工作

componentDidMount() {
        Animated.spring(this.state.left, {toValue: 200}).start();
    }

但是当我使用事件更改状态时（也开始动画）。 过渡变得粗糙（不平滑）。 这是我的活动代码

setDrawer() {
        this.setState({
            isDrawerOpened: !this.state.isDrawerOpened
        });

        if (this.state.isDrawerOpened) {
            this.setState({
                left: new Animated.Value(200)
            });
            Animated.spring(this.state.left, {toValue: -100, speed: 1000}).start();
        } else {
            this.setState({
                left: new Animated.Value(-100)
            });
            Animated.spring(this.state.left, {toValue: 200, speed: 1000}).start();
        }
    }

谁能解决这个问题:(，对不起，我的英语不好

Answer 1

尝试使用useNativeDriver: true 。 您的动画现在在JS线程中运行，并且可能被JS代码中发生的其他事件所阻止。 这会将动画移动到UI线程。

请参阅文档以供参考。