如何在 React Native 中使用 React 开发工具？

Question

我目前正在使用 react native 开发一个 android 应用程序，并在 genymotion 中进行仿真。 我已尝试使用此处所述的 React 开发人员工具调试我的应用程序。 控制台中抛出了 JS 错误，但我无法在 chrome 开发工具中选择 react 选项卡。

出现这种情况的原因似乎是 html 中没有生成 react 组件，仅此而已：

<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 开发工具与 React Native 一起使用？

注意：我目前使用的是 React 开发工具的 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安装为 chrome 扩展，它具有完整的 React Native 支持。 . 它们在我当前的设置中使用 react native 版本 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 Native 中使用 React 开发工具？

问题描述

3 个解决方案

解决方案1
2 2017-05-02 06:24:38

解决方案2
1 2016-06-11 19:55:57

解决方案3
0 2019-12-17 23:20:50

如何在 React Native 中使用 React 开发工具？

问题描述

3 个解决方案

解决方案1 2 2017-05-02 06:24:38

解决方案2 1 2016-06-11 19:55:57

解决方案3 0 2019-12-17 23:20:50

解决方案1
2 2017-05-02 06:24:38

解决方案2
1 2016-06-11 19:55:57

解决方案3
0 2019-12-17 23:20:50