醉临武-临武县第一中学官网

Hermes引擎如何在react native中使用呢?

Hermes is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, simply enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size. At this time Hermes is an opt-in React Native feature, and this guide explains how to enable it.

First, ensure you're using at least version 0.60.2 of React Native. If you're upgrading an existing app ensure everything works before trying to switch to Hermes.

Edit your android/app/build.gradle file and make the change illustrated below:

  project.ext.react = [
      entryFile: "index.js",-     enableHermes: false  // clean and rebuild if changing+     enableHermes: true  // clean and rebuild if changing
  ]

Next, if you've already built your app at least once, clean the build:

$ cd android && ./gradlew clean

That's it! You should now be able to develop and deploy your app as normal:

$ react-native run-android

Confirming Hermes is in use

If you've just created a new app from scratch you should see if Hermes is enabled in the welcome view:

Where to find JS engine status in AwesomeProject

HermesInternal global variable will be available in JavaScript that can be used to verify that Hermes is in use:

const isHermes = () => global.HermesInternal != null;

To see the benefits of Hermes, try making a release build/deployment of your app to compare. For example:

$ react-native run-android --variant release

This will compile JavaScript to bytecode during build time which will improve your app's startup speed on device.

Debugging Hermes using Google Chrome's DevTools

Hermes supports the Chrome debugger by implementing the Chrome inspector protocol. This means Chrome's tools can be used to directly debug JavaScript running on Hermes, on an emulator or device.

Chrome connects to Hermes running on device via Metro, so you'll need to know where Metro is listening. Typically this will be on localhost:8081, but this is configurable. When running yarn start the address is written to stdout on startup.

Once you know where the Metro server is listening, you can connect with Chrome using the following steps:

  1. Navigate to chrome://inspect in a Chrome browser instance.

  2. Use the Configure... button to add the Metro server address (typically localhost:8081 as described above).

Configure button in Chrome DevTools devices page

Dialog for adding Chrome DevTools network targets

  1. You should now see a "Hermes React Native" target with an "inspect" link which can be used to bring up debugger. If you don't see the "inspect" link, make sure the Metro server is running.Target inspect link

  2. You can now use the Chrome debug tools. For example, to breakpoint the next time some JavaScript is run, click on the pause button and trigger an action in your app which would cause JavaScript to execute.Pause button in debug tools


译文:

Hermes是一个开源JavaScript引擎,针对在Android上运行React Native应用程序进行了优化。对于许多应用程序,只需启用Hermes即可缩短启动时间,减少内存使用量并缩小应用程序大小。目前,Hermes是一个选择性的 React Native功能,本指南介绍了如何启用它。

首先,确保您至少使用React Native的0.60.2版本。如果您要升级现有应用程序,请确保在尝试切换到Hermes之前一切正常。

编辑您的android/app/build.gradle文件并进行如下所示的更改:

  project.ext.react = [
      entryFile: "index.js",-     enableHermes: false  // clean and rebuild if changing+     enableHermes: true  // clean and rebuild if changing
  ]

接下来,如果您已经构建了至少一次应用程序,请清理构建:

$ cd android && ./gradlew clean

而已!您现在应该能够正常开发和部署您的应用程序:

$ react-native run-android

确认爱马仕正在使用中

如果您刚刚从头创建了一个新应用程序,您应该看看在欢迎视图中是否启用了Hermes:

在AwesomeProject中哪里可以找到JS引擎状态

HermesInternalJavaScript中将提供一个全局变量,可用于验证Hermes是否正在使用中:

const isHermes = () => global.HermesInternal != null;

要了解Hermes的好处,请尝试制作/部署您的应用以进行比较。例如:

$ react-native run-android --variant release

这将在构建期间将JavaScript编译为字节码,这将提高应用程序在设备上的启动速度。

使用谷歌Chrome的DevTools调试爱马仕

Hermes通过实施Chrome检查器协议来支持Chrome调试器。这意味着Chrome的工具可用于在模拟器或设备上直接调试在Hermes上运行的JavaScript。

Chrome通过Metro连接到设备上运行的Hermes,因此您需要知道Metro正在收听的位置。通常这将打开localhost:8081,但这是可配置的运行时yarn start,地址在启动时写入stdout。

了解Metro服务器的监听位置后,您可以使用以下步骤与Chrome建立联系:

  1. 导航到chrome://inspectChrome浏览器实例。

  2. 使用Configure...按钮添加Metro服务器地址(通常localhost:8081如上所述)。

在Chrome DevTools设备页面中配置按钮

用于添加Chrome DevTools网络目标的对话框

  1. 您现在应该看到一个带有“inspect”链接的“Hermes React Native”目标,该链接可用于启动调试器。如果没有看到“检查”链接,请确保Metro服务器正在运行。目标检查链接

  2. 您现在可以使用Chrome调试工具。例如,要在下次运行某些JavaScript时断点,请单击暂停按钮并在应用程序中触发一个可导致JavaScript执行的操作。调试工具中的暂停按钮


  • 打赏和赞助

  • 如果哪篇文章对你有所帮助,且您手头还很宽裕,欢迎打赏赞助我

    未标题-1.png

    厚颜无耻的递上二维码