Question

我制作了一个屏幕（我称其为“ S1”），并具有从右向左平移的视图。很好由于此视图用于不同屏幕上的同一位置，以在屏幕之间导航，因此我想在每次需要在其他屏幕或S1上重新创建此视图时禁用动画。

我在每个屏幕上传递了参数needToAnimate，并且该值始终很好。

我已经尝试了不同的解决方案： -根据NeedToAnimate，我将视图封装在或中，但仅创建了，我不明白为什么。 -我还尝试始终根据needToAnimate更改开始marginLeft的值，但该值始终相同。

那么你能帮我吗？

这是我的代码

  animatedMarginLeft = this.needToAnimate
? new Animated.Value(screenWidth() - 240)
: new Animated.Value(17);

componentDidMount() {
Animated.timing(this.animatedMarginLeft, {
  toValue: 17,
  duration: 300,
  easing: Easing.linear
}).start();
}

public render() {
console.log(this.needToAnimate);
const leftMenu = this.getleftMenu();

return (
  <View style={styles.container}>
    <Animated.View
      style={[
        styles.animation_view,
        { marginLeft: this.animatedMarginLeft }
      ]}
    >
      <MyObject/>
    </Animated.View>

....

Answer 1

您是否仅在特定条件下尝试制作动画？

如果是这种情况，您应该在componentDidMount中有一个条件，如下所示：

componentDidMount(){

    if(needToAnimate){

        Animated.timing(this.animatedMarginLeft, {
            toValue: 17,
            duration: 300,
            easing: Easing.linear
        }).start();
    }
}

Answer 2

问题解决了。

问题出在由导航参数确定的变量NeedToAnimate

  needToAnimate = this.props.navigation.getParam("animate", true);

但是，这不是布尔值，而是字符串。因此，needToAnimate日志可以显示false，但是条件（this.needToAnimate）始终为true。

在React Native中的条件下禁用动画

2 个答案: