时间戳

首页 > 解决方案 > 在 React Native 中的条件下禁用动画

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

问题描述

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

我在每个屏幕上传递参数needToAnimate，值总是好的。

我已经尝试过不同的解决方案： - 我根据 needToAnimate 将我的视图封装在 a 或 中，但只创建了，我不明白为什么。- 我也尝试改变开始marginLeft的值，总是根据needToAnimate，但是值总是一样的。

那你能帮帮我吗？

这是我的代码

  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>

……

标签： react-nativeanimation

解决方案

问题解决了。

问题来自由导航参数确定的变量 needToAnimate

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

但这不被视为布尔值，而是被视为字符串。因此，needToAnimate 的日志可以显示为假，但条件 if (this.needToAnimate) 始终为真。

推荐阅读