logo标签列表

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

javascriptfacebookreactjsreact-native
4

我目前使用React Native开发Android应用程序，并在Genymotion上进行仿真。我尝试使用这里描述的React Developer Tools调试我的应用程序。控制台中会抛出JS错误，但我无法在Chrome DevTools中选择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="https://dev59.com/x3E95IYBdhLWcg3wm_Mu#17324511" 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 native中使用React开发工具？

注意：我当前正在使用React开发工具的v0.14.5版本。

3
React开发工具在某个版本（我认为是0.12.0）之后就无法正常使用了。这是一个已知的问题，可以在https://github.com/facebook/react-devtools/issues/229上查看相关信息。 - Chris Geirman
话虽如此，由于react自版本0.25起已成为直接导入，因此可能很快就会得到解决。 - kwelch
3个回答
2
1
0

我在连接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启动独立应用程序。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接