React Native setState() & Animated on Android

React Native setState() & Animated on Android

本文关键字:Animated on Android amp Native setState React      更新时间:2023-09-26

我正在为我的反应原生应用程序开发类似"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 回调上启动动画,据说是在状态完全更改并呈现组件后调用的, 但我仍然看到空消息吐司,具有讽刺意味的是,就在动画启动之前,我在 adb 控制台上看到了记录的新状态并正确更新,但没有呈现:'' ,我还尝试在启动节目动画之前setState之后强制更新this.forceUpdate,但没有成功,我仍然收到空消息,并且仍然在我的控制台日志中看到正确的状态:'', 我什至尝试在setStateforceUpdate之后设置超时,以便在动画之前为反应环境提供时间来渲染组件或其他内容,但我仍然收到空消息并且控制台日志 D 上显示正确的状态:

我知道这一定是显而易见或愚蠢的事情,但我就是想不通:(,我已经使用 react native 工作了大约 2~3 周,我知道 javascript 很长时间了,我想我对 react native 组件的生命周期知之甚少,但仅此而已,我仍然是 react native 的新手, 所以任何帮助将不胜感激,谢谢xD。

所以我弄清楚发生了什么,显然如果组件完全不在视野中,它不会重新渲染它(这是有意义的,没有什么可渲染的),并在最后一个渲染的组件上启动动画(这就是我认为的错误,它应该在再次可见时立即重新渲染它),所以我通过使组件 1 像素可见(1 像素行)与透明背景来修补它, 所以它在状态更新后重新渲染何时显示和动画,在它隐藏之后,我再次将其背景设置为透明,以隐藏 1 像素行,希望这对那里的人有所帮助,我不知道在哪里发布问题,以便他们修复 XD,祝你好运:P