Android开发环境搭建

具体步骤请参考搭建开发环境指南。这个环境搭建指南写的非常详尽，条理清晰，我就不拾人牙慧了，我也是照着一步一步安装的。

这里要提醒一下那些看视频搭建开发环境的小伙伴，因为我在这之前，也看过视频，照着搭建过环境，但是问题就是视频具有滞后性，视频里的环境并非是官网的最新版本的搭建指南，而是历史版本的指南。所以，我觉得视频可以参考，让你熟悉一些搭建环境中用到的方式方法，但是具体搭建环境，还是照着官网指南来比较好。

手机开启USB调试模式

yarn android

在Metro所在的node terminal里，你可能会看到很多警告信息，甚至有一些代码stack的报错信息，除非它们导致整个bundle过程crash掉，否则这些东西，是不会影响接下来的调试环境的搭建的。这些警告和错误，是需要你从代码本身分析去解决，和搭建环境几乎没有关系。

react-devtools

注意端口号8097，这个号是可能会变化的，每次启动react-devtools,它可能会不一样。

adb reverse tcp:8097 tcp:8097

这一个命令是为了设定从设备到电脑的端口转发。重要事情再次重复，务必确保tcp：后面跟着的端口号，和react-devtools里看到的一样。

用手摇晃那个用USB线连接到PC的真手机，手机屏幕上会弹出一个菜单，其中有一个选项叫Debug或者Debug Remotely。不同的手机，内容可能不一样。总之，就选Debug那个就对了。如果你之前已经做出了选择，当你摇晃手机后，react-devtools和React Native Debugger会自动连接成功。

如果你已经点击了手机上的Debug，但是react-devtools仍然显示waiting for connection，那么需要再次确认step 4里的tcp：后面的端口号，是否和react-devtools给出的端口号一致。以我的最初几次失败经验总结来看，端口号不一致，几乎是唯一原因。

如果你摇晃手机后，手机上只有Stopping debug，而没有Debug，那么说明你你之前已经连接成功过了，此时你只需要把这个菜单关闭或者点击Reload。如果一直保留手机Debug模式的提示菜单在手机上，很可能导致后续无法顺利调试，至少我用我的手机调试时，是这种情况。

在Chrome里，按键盘的F12，打开Dev Tool界面。在Console里的top中，打开debuggerWorker.js(这个名字有可能是debuggerWorker.xxxx.js)。

此时回到Chrome，看到Console里，有一个你刚刚在react-devtools里选择的节点信息。

进一步确认，可以在react-devtools里选中Root Element，然后回到Chrome里，输入$r来获取整个RN项目的React对象。

如果上面任何一步出错了，那么第2步重新开始。如果走到这里，那么初步的调试环境已经准备好了。这个调试环境，可以让你通过打log和查看React节点的方式，来观察app里的UI的层次和属性。
那么，有没有一种方法，把Chrome和react-devtools结合到一起，而不用两个工具来回切换，答案还真有。请参考 React Native Debugger。有了它之后，先启动App，然后打开该工具，再晃动手机进入Debug模式。如果直接用了它，那么6-8就可以省略。