2016-04-25 84 views
1

我正在为我的react-native应用程序的'toast'组件部分工作。它可以在iOS模拟器上正常工作,但它不会更新我的android设备(Galaxy Note 2)上的动画之前的状态。这里是我的组件的渲染器:React Native setState()&Android上的动画

render() { 
     return (<Animated.View 
         style={[{transform:[{translateY: this.animatedValue}]}, 
         styles.toast, 
         {backgroundColor: this.state.color}]}> 
        <Text style={styles.toastText}>{this.state.message}</Text> 
       </Animated.View>); 
    } 

this.animatedValue创建这样的构造:

this.animatedValue = new Animated.Value(-70); 

而且我有一个与this.setState更新状态的显示方法来设置消息,颜色,开始动画前Animated.timing我有一个回调动画结束,它启动超时隐藏烤面包,因为我说这一切都可以在iOS上正常工作,但在android第一次显示烤面包时,它没有文字它(我初始化为message作为一个空字符串),第二次它应该显示它,s显示它应该显示的最后祝酒的消息和颜色。防爆。如果登录失败,我在adb控制台上看到登录失败的消息正在启动,但我仍然看到空白的绿色,然后我做了正确的登录,并且在adb控制台中看到成功的登录消息正在启动,但我仍然看到红色失败的消息,而不是:\。

我在计算它可以是一个状态变化,在动画开始之前没有完全更新(有时候我看到了一个消息,在动画的中间/结尾,它突然改变颜色和文本的吐司发射) ,所以我第一次尝试在setState回调中启动动画,在状态完全更改并呈现组件后,我们会调用该动画,但我仍然看到空的消息吐司,具有讽刺意味的是,在我看到的动画启动之前adb控制台记录的新状态,并正确更新,但没有呈现:\,我也尝试强制更新setStatethis.forceUpdate所有发动显示动画之前,没有成功,我仍然收到空消息,仍然看到正确的状态在我的控制台日志中:\,我甚至尝试在之后设置超时和forceUpdate让时间来作出反应的环境渲染动画之前的成分什么的,但是我还是空的消息和正确的状态被显示在我的控制台日志d:

我知道这一定有什么东西明显或愚蠢的,但我无法弄清楚:(:(我一直在为2〜3周的反应本土工作,我知道很长一段时间的JavaScript,并且我认为我对于本机的反应很少有把握组件的生命周期,但仅此而已,我还是新的反应原生,所以任何帮助将不胜感激,谢谢xD。

回答

1

所以我想清楚发生了什么,显然如果组件完全不在视图中,它不会重新渲染它(它是有道理的,没有任何可渲染的),并在最后渲染的组件上启动动画(这是我认为是错误的,它应该在它再次可见时立即重新渲染),所以我通过使透明背景的组件1像素可见(1像素行)对其进行了修补,因此它在状态更新什么时候会显示和动画,当它隐藏后,我将其背景再次设置为透明,以隐藏1像素行,希望这有助于某人,我不知道该发布问题的位置,以便他们得到它固定XD,祝你好运可能与你的力量:P