React Native 开发者工具介绍

关于开发调试ReactNative的笔记

React Develop Tool

• 命令报错 emulator -avd xxx
  原因，不明，但是采用Android API 版本小于28 的就没问题。当然虽然报错，也是可以用的。这个命令一开始无法使用，Android SDK 里面有两个emulator.exe, 一个在 Tools\emulator.exe, 一个在emulators\emulator.exe，可以使用这个命令创建软链接mklink .\emulator.exe ..\emulator\emulator.exe
• 在Android Simulator上打开调试菜单， Ctrl + M, 28版本的镜像没问题。30打不开只能使用adb shell input keyevent 82 或者 matrixbox 去打开。
• React Native Cli
  • react-native start 这个是启动Metro，Metro，地铁，它是沟通Android设备的核心，同时也是调试的js虚拟机所在。它本质上是一个捆扎器，跟webpack功能类似。平时开发的时候可以通过它来观察到app的运行状态，或者向app发送一些指令例如打开开发者菜单，重新加载等。
  • react-native run-android,这个是用来编译android的代码，同时将app发送到模拟器或者设备中，启动app。
• Hermes,这个是js 引擎,facebook 开源的针对ReactNative 优化的。跟ios中的JavaScriptCore, chrome中的v8类似。它还是个实验品，提供了ios/android中js 的统一特性。开启方法
  • 非Hermes的调试其实js 运行于开发者电脑中的v8中，
  • Hermes的调试，js是运行于设备中的hermes中。
• 调试，针对非Hermes,我们可以通过vscode 或者chrome/Edge 来调试，vscode 可以通过attach 到metro上也就是localhost:8081, chrome/Edge 则是通过localhost:8081/debugger-ui,打开console,但是总的来说，vscode 方便一些。如果不灵，可以在虚拟机中debug再开一下就好了。
• Network Inspector, 先安装openssl,加入环境变量，然后vscode 里面React Native: Run Network Inspector