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

Question

在调试React网站时，我可以使用React Developer Tools查看组件层次结构：

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

Answer 1

不幸的是，自从版本0.12版本反应原生，Devtools“React”标签不再起作用了。这是a known issue。

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

UPDATE

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中选择“Start Remote JS Debugging”