React Native：Android上动画不能正常工作

Question

我已经在过去的两天里一直在尝试解决这个问题，这个问题在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>

  );
}

这个组件是子组件，在父组件中像这样使用：<FeedBack ref={ref => this.feedback = ref}/>，没有任何条件来检查是否显示（因为在构造函数中将动画缩放设置为零，所以不需要）。

当按钮按下时，toggle()方法从父组件中调用。

现在，在iOS上运行良好，在组件加载时，视图不存在，直到按下按钮（然后缩放）。但是在Android上，组件加载时，视图已经存在。当我按下按钮时，动画视图会消失并重新出现（带有动画缩放），后续的切换运行正常。问题在于，即使缩放的initialValue为零，当它首次加载时，视图仍然存在。

- Yasir

Answer 1

这已经是一个有关 react-native 在 Android 方面的问题有一段时间了（叹气）。似乎将值设置为 0 会剥夺它的特征，基本上使其成为 null，然后在动画到达 > 0 后再恢复使用其实际值。

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

您可以在 此处 关注该问题。

- Ryan Turnbull

---

真糟糕，这浪费了我很多时间...感谢您的超音速回复。 - Yasir

尝试解决方法？很想看看它的效果。如果仍然存在但非常小，也可以通过动画来控制不透明度以隐藏它。 - Ryan Turnbull

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: Easing.bezier(.5,1.2,1,1) }); style={[{ width: parentRef.current.interpolate({ inputRange: [0, 1], outputRange: [autoScale(100), autoScale(50)], }), }]} > - master_dodo