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

【问题标题】：View component hierarchy in React Native在 React Native 中查看组件层次结构
【发布时间】：2015-11-26 12:37:29
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

不幸的是，从 react-native 的 0.12 版本开始，Devtools 的“React”选项卡不再起作用。我是a known issue。

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

更新

Devtools“React”选项卡在 Chrome 中仍然无法使用，但最新的 Nuclide 已内置！（这是一个基于 Atom 构建的 IDE）。

将 Atom 与 Nuclide 包一起安装后，启动您的应用并停用 chrome 或 safari 调试。

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

【讨论】：

是的，目前似乎还没有真正适用于 React Native 的调试器。 +1，这是目前唯一真正正确的答案，但我并不是纯粹因为我希望它在接下来的几个月内过时，并且不想在它这样做时回来不接受它。 :)
@MarkAmery 很公平 :) 我希望它很快就会过时 :)
@MarkAmery 仅供参考，开发人员工具仍然无法与 Chrome 一起使用，但它们现在在 Nuclide 中：)

【解决方案2】：

这适用于我使用带有 React Native 0.55 的独立 react-devtools 应用程序。

【讨论】：