React Native UI 在 Android 设备上冻结

Question

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

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

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

谢谢

Answer 1

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

问题：

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

解决方案：

在Android Studio中使用本机调试器进行彻底调试后，

@ReactMethod

中的本机模块java端创建了多个线程，并且主线程上有很大的开销，看起来主JS线程在更新时变得很慢UI 框架并在某个时刻中断，从而导致 UI 冻结。

感谢V8运行时， 我能够使用一个名为 react-native-v8 的开源包，它可以更轻松地将 V8 运行时集成到 React Native 应用程序中。目前此包仅支持 Android。

V8 JS 引擎 同时在后台运行任务，因此使任何 UI 开销任务（在我的情况下来自我的本机模块的调用）在后台执行。这使我的应用程序变得顺利，并且没有任何 UI 冻结。

谢谢。

Answer 2

我遇到了类似的问题，经过大量调试后解决了。

我有一个执行繁重计算的本机模块，这可能需要几秒钟。我想显示一个等待指示器，直到任务完成。为此，我使用了状态（即 [wait, setWait]）。因此，在调用本机方法之前，我设置了等待状态，这导致了问题。

我在 onPress 中调用该本机模块。我尝试了很多方法来避免 Button 的 UI 冻结。

解决方案1： 使用setTimeout，我将调用原生方法的代码放在setTimeout内部，并将时间设置为0。

解决方案2： 使用 useEffect，我检查 wait 是否为 true，然后调用本机方法。这也解决了问题。