在 Android 上反应原生 setState() 和动画答案

【问题标题】：React Native setState() & Animated on Android在 Android 上反应原生 setState() 和动画
【发布时间】：2016-04-25 16:16:25
【问题描述】：

我正在为我的 react-native 应用程序开发类似“toast”的组件。它适用于 iOS 模拟器，但它不会在我的 android 设备（Galaxy Note 2）上更新动画之前的状态。这是我的组件的渲染器：

    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);

我有一个 show 方法，用 this.setState 更新状态以设置消息和颜色，在用 Animated.timing 开始动画之前，我在动画结束时有一个回调，它启动一个超时来隐藏 toast，因为我说它在 iOS 上一切正常，但在 android 上，第一次显示 toast 时没有文本（我将 message 初始化为空字符串），第二次应该显示它，显示消息和颜色它应该显示的最后一个祝酒词。前任。您登录失败，我在 adb 控制台上看到正在启动失败的登录消息，但我仍然看到一个带有绿色的空消息，然后我进行了正确的登录，我在 adb 控制台中看到了成功登录消息正在启动，但我仍然看到红色的失败消息：\。

我认为这可能是动画开始之前没有完全更新的状态更改（有时我看到 toast 启动时带有一条消息，并且在动画的中间/结束时它突然改变了颜色和文本），所以我首先尝试在 setState 回调上启动动画，据说它是在状态完全改变并渲染组件后调用的，但我仍然看到空消息 toast，讽刺的是，就在我看到的动画启动之前我的 adb 控制台记录了记录的新状态并且已正确更新，但未呈现：\，我还尝试在启动显示动画之前在 setState 和 this.forceUpdate 之后强制更新，但没有成功，我仍然得到空消息并且仍然在我的控制台日志中看到正确的状态：\，我什至尝试在 setState 和 forceUpdate 之后设置超时，以便在动画之前给反应环境渲染组件或其他东西的时间，但我仍然获取空消息和正确的 st ate 显示在我的控制台日志 D：

我知道这一定是显而易见或愚蠢的，但我就是想不通 :(，我使用 react native 已经有 2~3 周了，我知道 javascript 很长时间了，而且我认为我对 react native 组件的生命周期了解甚少，但仅此而已，我还是 react native 的新手，因此非常感谢您提供任何帮助，谢谢 xD。

【问题讨论】：

标签： javascript android animation react-native setstate

【解决方案1】：

所以我弄清楚了发生了什么，显然如果组件完全看不见，它不会重新渲染它（这是有道理的，没有要渲染的东西），并在最后一个渲染的组件上开始动画（这就是我认为的错误，它应该在它再次可见时重新渲染它），所以我通过使组件1像素可见（1像素行）具有透明背景来修补它，所以它在状态之后重新渲染更新何时显示和动画，隐藏后，我再次将其背景设置为透明，隐藏 1 像素行，希望这可以帮助那里的人，我不知道在哪里发布问题，所以他们得到它修复了 XD，祝你好运：P

【讨论】：