Question

我目前正在使用react native来开发一个Android应用程序，并在genymotion中进行模拟。我已尝试使用如here所述的反应开发工具调试我的应用程序。控制台中出现了JS错误，但我无法在chrome dev工具中选择react选项卡。

原因似乎是html中没有生成反应组件，只有这样：

<body>
  <div id="devtools-banner">
    <h3>Install React DevTools</h3>
    <p>
       React Developer Tools is an extension that allows you to inspect the
       React component hierarchies in the Chrome Developer Tools.
    </p>
    <a href="https://fb.me/react-devtools" target="_blank">
      Install
    </a>
  </div>
  <div class="content">
    <p>
      React Native JS code runs inside this Chrome tab.
    </p>
    <p>Press <span class="shortcut">⌘⌥J</span> to open Developer Tools. Enable <a href="http://stackoverflow.com/a/17324511/232122" target="_blank">Pause On Caught Exceptions</a> for a better debugging experience.</p>
    <p>Status: <span id="status">Debugger session #0 active.</span></p>
  </div>
</body>

我对iOS有同样的问题。如何使用React dev工具和native native？

注意：我目前正在使用React dev工具的v0.14.5。

Answer 1

使用React Native 0.43或更高版本，您应该使用独立的DevTools应用程序：https://github.com/facebook/react-devtools/tree/master/packages/react-devtools

Answer 2

您只需安装React DevTools as a chrome extension，即full React Native support.即可。它们在我当前的设置中使用反应原生版本0.26。

Answer 3

我在将react native（iOS和android）连接到最新版本（react-devtools v4）时遇到问题。通过安装v3（将package.json中的依赖项更改为"react-devtools": "^3",，它可以正常工作。这还包括使用Chrome控制台以$r“检查”组件。

确保没有全局react-devtools v4。 npm rm -g react-devtools@^4，然后npm i -g react-devtools@^3。这样，您可以使用react-devtools启动独立应用程序。

如何使用React dev工具与本机做出反应？

3 个答案: