React Native:动画在android上无法正常工作

时间:2017-11-14 06:09:54

标签: react-native react-animated

我一直在努力修复过去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>

  );
}

这个组件是子组件,在父组件中使用如下:<FeedBack ref={ref => this.feedback = ref}/>没有任何条件要检查显示与否(因为构造函数中的动画比例设置为零,所以不需要)

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

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

1 个答案:

答案 0 :(得分:19)

这已经成为问题,但是现在已经有一段时间了(问题)。似乎将值设置为react-native会将其除去其特征,基本上将其视为0,然后在动画为null

后恢复使用其实际值

解决方法是设置动画     > 0

您可以关注问题here