在Android上反应Native setState（）和动画

Question

I'm working on 'toast' like component for my react-native app. And it works fine with the iOS emulator, but it doesn't update the state before the animation on my android device (Galaxy Note 2). Here is the renderer of my component:

    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 is created like this on the constructor:

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

And I have a show method that updates the state with this.setState to set the message and color, before starting the animation with Animated.timing I have a callback on animation end which launches a timeout to hide the toast, as I said it all works fine on iOS, but on android the first time the toast is shown it is with no text in it (I initialized message as an empty string) and the second time it should show it, shows the message and color of the last toast it should have shown. Ex. You do a login fail and I see on the adb console that a failed login message is being launched, still I see an empty one with green color, then I do a correct login, and I see in the adb console that a success login message is being launched, still I see the failed message with red color instead :\\.

I'm figuring it can be a state change not being fully updated before the animation starts (Sometimes I've seen the toast launch with one message and in the middle/end of the animation it suddenly changed color and text), so I've first tried starting the animation on the setState callback, that supposedly is called after the state is fully changed and rendered the component, but I still I see the empty message toast, ironically just before the animation launch I see on my adb console the logged new state and is correctly updated, but not rendered :\\ , I also tried forcing the update just after the setState with this.forceUpdate all before launching the show animation, with no success, I still get the empty message and still see the correct state in my console log :\\, I even tried setting a timeout after the setState and forceUpdate to give time to the react environment to render the component or something, before the animation, but I still get the empty message and the correct state bei ng shown on my console log D:

I know it must be something obvious or silly, but I just can't figure it out :(, I've been working with react native for like 2~3 weeks, I know javascript for a long time, and I think I get little grasp of the react native components life cycle, but nothing more, I'm still new to react native, so any help would be greatly appreciated, thanks xD.

Answer 1

所以我弄清楚了发生了什么，很明显，如果组件完全不在视野范围内，它不会重新渲染它（有意义，没有要渲染的东西），然后在最后一个渲染的组件上开始动画（这就是我的意思）认为是错误的，应在再次可见后立即重新渲染它），因此我通过使组件具有透明背景的1像素可见（1像素行）来对其进行了修补，因此在状态更新时将其重新渲染将要显示并制作动画，然后将其隐藏，然后将其背景再次设置为透明，以隐藏1像素行，希望这对那里的人有所帮助，我不知道在哪里发布问题，因此他们将其固定为XD ，祝你好运。