1

我正在为我的 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为空字符串），第二次应该显示它，显示应该显示的最后一个 toast 的消息和颜色。前任。您登录失败，我在 adb 控制台上看到正在启动失败的登录消息，但我仍然看到一个带有绿色的空消息，然后我进行了正确登录，我在 adb 控制台中看到了成功登录消息正在启动，但我仍然看到带有红色的失败消息：\。

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

我知道这一定是显而易见或愚蠢的，但我就是想不通:(，我已经使用 react native 2~3 周了，我知道 javascript 很长时间了，我想我明白了对 react native 组件生命周期的了解不多，但仅此而已，我还是 react native 的新手，所以任何帮助将不胜感激，谢谢 xD。

4

1 回答 1

2

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

于 2016-04-25T18:04:18.767 回答