【问题标题】:React Native: Animation not working properly on androidReact Native:动画在 android 上无法正常工作
【发布时间】:2017-11-14 06:09:54
【问题描述】:

过去 2 天我一直在尝试解决问题,它在 iOS 上运行良好

constructor(){
  super();

  this.animation = new Animated.Value(0)

  this.state = {
    expanded: false,
  };
}
toggle(){
  let initialValue = this.state.expanded? 1 : 0 ,
     finalValue = this.state.expanded? 0 : 1

  this.setState({
     expanded: !this.state.expanded,
  });

  this.animation.setValue(initialValue)
  Animated.timing(
    this.animation,
    {
      toValue: finalValue,
    }
  ).start();
}

render(){
  return(
    <Animated.View style={{{flex: 1, marginTop: 28, paddingLeft: 25, transform: [{ scale: this.animation }, {perspective: 1000 }]}}}>
     ....
    </Animated.View>

  );
}

这个组件是child,在parent中这样使用:&lt;FeedBack ref={ref =&gt; this.feedback = ref}/&gt;没有任何条件检查是否显示(因为动画比例在构造函数中设置为零,所以不需要)

当按下按钮时,正在从父级调用 toggle() 方法。

现在 this works fine on iOS ,当组件加载时,视图不存在,直到按下按钮(然后缩放)。但是在android 上,当组件加载时,视图已经存在。当我按下按钮时,动画视图消失并重新出现(带有动画缩放),随后的切换工作正常。 android中的问题是即使initialValue的比例为零,第一次加载时视图仍然存在。

【问题讨论】:

    标签: react-native react-animated


    【解决方案1】:

    这一直是android 端react-native 的问题(叹气)。似乎将值设置为0 剥夺了它的特征,基本上将其视为null,然后在动画为&gt; 0 后恢复使用其实际值

    一种解决方法是像这样设置动画 this.animation = new Animated.Value(0.01);

    您可以关注问题here

    【讨论】:

    • 该死的兄弟,真是浪费我的时间......谢谢超音速回复
    • 尝试解决方法?很想看看它是怎么回事。如果不透明度仍然存在超小,也可以为不透明度设置动画。
    • v0.63.3。谢谢。早些时候,宽度只是选择 0 或 1,而不是插值。甚至为我投入 1 个工作,而不仅仅是 0.01......... const parentRef = useRef(new Animated.Value(.01)); Animated.timing(parentRef.current, { toValue, duration: 200, useNativeDriver: false, easing: E​​asing.bezier(.5,1.2,1,1) }); style={[{ width: parentRef.current.interpolate({ inputRange: [0, 1], outputRange: [autoScale(100), autoScale(50)], }), }]} >
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-08-18
    • 2021-03-01
    • 2018-06-13
    • 2021-10-01
    相关资源
    最近更新 更多