React Native setState() & Animated on Android
React Native setState() & Animated on Android
我正在为我的反应原生应用程序开发类似"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
,但没有成功,我仍然收到空消息,并且仍然在我的控制台日志中看到正确的状态:'', 我什至尝试在setState
和forceUpdate
之后设置超时,以便在动画之前为反应环境提供时间来渲染组件或其他内容,但我仍然收到空消息并且控制台日志 D 上显示正确的状态:
我知道这一定是显而易见或愚蠢的事情,但我就是想不通:(,我已经使用 react native 工作了大约 2~3 周,我知道 javascript 很长时间了,我想我对 react native 组件的生命周期知之甚少,但仅此而已,我仍然是 react native 的新手, 所以任何帮助将不胜感激,谢谢xD。
所以我弄清楚发生了什么,显然如果组件完全不在视野中,它不会重新渲染它(这是有意义的,没有什么可渲染的),并在最后一个渲染的组件上启动动画(这就是我认为的错误,它应该在再次可见时立即重新渲染它),所以我通过使组件 1 像素可见(1 像素行)与透明背景来修补它, 所以它在状态更新后重新渲染何时显示和动画,在它隐藏之后,我再次将其背景设置为透明,以隐藏 1 像素行,希望这对那里的人有所帮助,我不知道在哪里发布问题,以便他们修复 XD,祝你好运:P
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- window.on.scroll事件未启动
- Socket.io on Mozilla Rhino
- CSS中的游标属性似乎不适用于USB On The Go
- jQuery点击ON现在使用.load触发关闭
- JQuery.on(“keydown”)追加到页面时不工作
- 使用.on动态添加jquery/js不知道的html元素
- angularjs$valid-on-dates在firefox中报告错误
- addEventListener on NodeList
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- jQuery 1.7.2:.on()在一个页面上工作;Don’别再干别的了
- Jquery on单击“显示信息”
- 平均值.on(事件[,选择器][,数据],处理程序)
- 多个jQuery.on()事件无法运行xBrowser(取决于顺序)
- 如何使jQuery的“bind”或“on”事件处理程序幂等
- 无法使以下ng on click outside指令在同一页面上的两个元素上工作
- Javascript mozfullscreenchange on Firefox
- iframe and JavaScript on different pages
- React Native setState() & Animated on Android