RN入门：第一个RN工程(含debug指导)
2019-03-04 本文已影响9人
蓝不蓝编程
- 安装VS Code
-
安装插件：
1）debugger for chrome
2）React Native Tools
- 创建第一个RN项目
react-native init HelloRNProject - 设置安卓SDK路径
在项目根目录下android目录下新建local.properties，内容（sdk.dir后面的值根据实际情况修改）：
sdk.dir=/Users/实际用户名称/Library/Android/sdk
- 启动一个模拟器或者将手机连接到电脑
- 在工程目录下执行：
react-native run-android
如果报如下的错误，就设置一下ANDROID_HOME环境变量(export ANDROID_HOME=/Users/实际用户名称/Library/Android/sdk)再执行上面命令：
FAILURE: Build failed with an exception.
* What went wrong:
A problem occurred configuring project ':app'.
> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
-
效果图
1）电脑侧：
2）手机侧：
-
开启热加载
1）使劲摇晃手机，在显示的菜单中选择Enable Hot Reloading
2）修改App.js内容，保存后，手机上就会实时看到变更后内容了。
- Debug(调试)
1）电脑上执行：adb reverse tcp:8081 tcp:8081
2）摇晃手机，菜单中选择“Debug JS Remotely”
3）打开chrome浏览器，访问：http://localhost:8081/debugger-ui/
页面左下方文字会显示“Status: Debugger session #0 active.”（如果没有做上面异步，此处会显示：Status: Waiting, press ⌘R in simulator to reload and connect.）。选择chrome浏览器的“开发者工具”菜单，打开“debuggerWorker.js》localhost:8081”节点，里面就会出现我们的代码了，就可以进行debug了。
附录
参考资料：
https://blog.csdn.net/zcmain/article/details/80406084
https://www.jianshu.com/p/30e1d7d99a9e
安卓开发技术分享: https://www.jianshu.com/p/442339952f26
更多技术总结好文，请关注：「程序园中猿」
