简体繁体 English

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

[英]View component hierarchy in React Native

原文 2015-11-26 12:37:29 4 2 javascript/ reactjs/ react-native/ developer-tools

When debugging a React website, I can view the component hierarchy using the React Developer Tools : 在调试React网站时，我可以使用React Developer Tools查看组件层次结构：

How can I do the same in React Native? 我该如何在React Native中做同样的事情？ The rage shake menu contains an 'inspector' but it only seems to let me inspect a single element by tapping it - I don't see any way to browse the full component hierarchy. 愤怒的摇动菜单包含一个“检查器”，但似乎只允许我通过点击它来检查单个元素-我看不到浏览整个组件层次结构的任何方法。

2 个解决方案

Unfortunately, since version 0.12 of react-native, the Devtools "React" Tab does not work anymore. 不幸的是，由于react-native的版本为0.12，Devtools的“ React”选项卡不再起作用。 It's a known issue . 这是一个已知问题。

There's a quite active discussion on Github that has been open for a while, but no solutions yet. 关于Github的讨论非常活跃，已经开放了一段时间，但还没有解决方案。

UPDATE 更新

The Devtools "React" tab still don't work in Chrome, but the latest Nuclide has it built in! Devtools的“ React”选项卡在Chrome中仍然无法使用，但是内置了最新的Nuclide ！ (It's an IDE built on top of Atom). （这是在Atom之上构建的IDE）。

With Atom installed with the Nuclide package, start your app and deactivate chrome or safari debugging. 在安装了Nuclide软件包的Atom之后，启动您的应用并停用chrome或safari调试。

Then, pressing Cmd+Shift+P in Atom will trigger the command palette and you can toggle the dev tools by searching for React Native Inspector: 然后，在Atom中按Cmd+Shift+P将触发命令面板，您可以通过搜索React Native Inspector来切换开发工具：

This works for me using the standalone react-devtools app with React Native 0.55. 这对我来说可以使用带有React Native 0.55的独立react-devtools应用程序。

Run npm install -g react-devtools 运行npm install -g react-devtools
Run react-devtools 运行react-devtools
Open React Native app and select "Start Remote JS Debugging" from dev menu 打开React Native应用程序，然后从开发菜单中选择“启动远程JS调试”