在React Native中查看组件层次结构

Question

调试React网站时，我可以使用React Developer Tools：

查看组件层次结构

我怎样才能在React Native中做同样的事情？愤怒摇动菜单包含一个'检查器'，但它似乎只让我通过点击它来检查单个元素 - 我没有看到任何方法来浏览完整的组件层次结构。

Answer 1

不幸的是，自反应原生的0.12版以来，Devtools“React”选项卡不再起作用了。 这是a known issue。

有quite active discussion on Github已经开放了一段时间，但还没有解决方案。

<强>更新

Devtools“React”标签仍然无法在Chrome中运行，但最新的Nuclide内置了它！ （这是一个建立在Atom之上的IDE。）

使用Nuclide软件包安装Atom，启动您的应用并停用chrome或safari调试。

然后，在Atom中按Cmd+Shift+P将触发命令选项板，您可以通过搜索React Native Inspector来切换开发工具：

Answer 2

这可以通过独立的react-devtools应用和React Native 0.55来使用。

1. 运行npm install -g react-devtools
2. 运行react-devtools
3. 打开React Native应用程序，然后从dev menu中选择“启动远程JS调试”