时间戳

首页 > 解决方案 > 设备android上的React Native UI冻结

android - 设备android上的React Native UI冻结

问题描述

我是反应原生开发的新手，但我有一个问题，我的应用程序调用一些原生模块并根据这些模块的响应更新 UI，但是一段时间后 UI 冻结，我无法更改选项卡或按下按钮等

它在模拟器上运行良好，只有在我安装到设备时才会发生

这是反应中的常见问题吗？我应该看什么？也许我犯了一些常见的错误

谢谢

标签： androidreact-nativeuser-interfacedevicefreeze

解决方案

首先，我想描述一下我在 React Native ( v0.63.2 ) 中遇到的类似问题以及解决该问题的解决方案。

问题：

我有一个简单的 React Native 应用程序，其中 Scroll View 作为主视图，还有许多其他包含按钮、文本等的子视图。在componentDidMount()中，我正在执行大多数本机模块调用并为每个 API 调用设置状态。因此，在获取数据一段时间后，UI 元素开始冻结，我不再能够单击按钮但能够在视图中滚动。滚动视图有效，因为它位于主线程上。有关 Scroll View 性能的更多信息，请参阅ScrollView-Performance。

解决方案：

在Android Studio中使用原生调试器彻底调试后，在原生模块java端创建了多个线程@ReactMethod，主线程开销很大，看起来主JS线程在更新UI框架时变慢并中断在某个时候，从而导致 UI 冻结。

感谢V8 运行时，我能够使用一个名为react-native-v8的开源包，它更容易将 V8 运行时集成到 React Native 应用程序中。目前这个包只支持安卓。

V8 JS 引擎同时在后台运行任务，因此使任何 UI 开销任务（在我的例子中来自我的本机模块的调用）在后台执行。这使我的应用程序流畅，并且没有任何 UI 冻结。

谢谢。

推荐阅读