React 导航 5 非常慢并且在 Expo 上下降了 JS FPS

Question

我目前正在开发 React Native (Expo) 应用程序，并且面临一些性能问题。我还没有找到我的问题的任何答案，所以我希望有人可以帮助我。

我的问题是，每当我在物理设备 (Galaxy S9+) 上启动应用程序并导航到不同的屏幕时，我都会注意到 JS 帧从 60 一路下降到 10-30 左右。我有一个主抽屉导航器、一​​个底部选项卡导航器和一些堆栈导航器。我有基本的视图，文本，...组件，所以我不认为这是由于重型组件。（我正在使用react-navigation v5）

我还必须提到的是，我在 iOS 模拟器上并没有真正看到任何性能不足或 JS FPS 下降的情况。

Answer 1

Android 设备对未优化的 JavaScript 代码更加敏感，因为与 iOS 设备相比，它们的 JS 性能通常要差得多，因此您编写低效代码的余地较小。同样的代码在 iOS 上运行感觉很流畅，但在 Android 上运行可能会频繁丢帧。

建议使用React Devtools来了解 React 应用程序中渲染性能缓慢的根源，我认为这是一个很好的选择，也是你应该做的事情。

您可以做的另一件事是无论您在哪里使用，都切换到createNativeStackNavigatorcreateStackNavigator，这将有助于解决您的一些性能问题。您还可以在此 YouTube 视频中了解有关此导航器的更多信息。

我个人现在会执行上述两项操作：1）分析你的 React 渲染性能并找到你在哪里做不必要/额外的工作，消除它。2) 切换到使用createNativeStackNavigator.