React Native之从「UI元素直接定位代码」

React Native之从「UI元素直接定位代码」

很多时候我们开发时想根据UI元素，直接知道对应的代码在哪个文件的哪个位置，react native开发的程序员是有这个福利的，下面我们具体来看看：

办法一（什么额外的软件都不安装）

• 打开检查元素(不需要debug in chrome)；
• 点击某个按钮，如下图所示：

youdao1.jpg

办法二（借助react-devtools）

官方文档：https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools

安装

• npm install -g react-devtools
• 如果安装过程中发现比较慢，看看是不是下面这个原因：

Downloading electron-v1.8.8-darwin-x64.zip
[=>             ] 6.4% of 48.34 MB (1.98 kB/s)

• 如果是这个原因，结束安装吧，自己去下载electron-v1.8.8-darwin-x64.zip，然后放到 /Users/test/.electron 这个目录（test是用户名），然后直接把 /usr/local/lib/node_modules/react-devtools/node_modules/electron 这个目录删掉，重新执行 npm install -g react-devtools 命令即可很快安装完成；

使用

• 命令行执行 react-devtools 命令；
• 打开模拟器，在debug in chrome模式下进去一个rn项目；
• 打开检查元素开关即可(不需要debug in chrome)；
• 试试点击页面元素，有没有很惊奇？
• 祝你好运，如下图所示：

youdao2.jpg