IDE -> WebStorm
目前市面上的IDE,有知名的Sublime和jetbrains,其中jetbrains有一系列的IDE支持多种语言,如JAVA(IntelliJ IDEA)、Python(Pycharm)、Ruby(RubyMine)、Javascript/html/css(WebStorm),由于我本人长期开发Python,采用的是Pycharm,因此我个人倾向与采用WebStorm作为react native的IDE开发工具。
安装到手机
- 用usb线对接上 电脑 和 手机.
- 查看设备是否已经连接.
注意:如果这里没有列出任何东西, 请参考 问题记录 的 1. adb device没有列出任何东西.C:\Users\zhengtong>adb devices List of devices attached 5b921483 device
- 启动项目
注意:如果项目启动过程中出现错误,请参考 问题记录 的 2. 会话连接失败.C:\Users\zhengtong\WebstormProjects\rn_practice>react-native start C:\Users\zhengtong\WebstormProjects\rn_practice>react-native run-android
- 最终效果
最终效果
Debugging(调试)
代码写完了之后,除了每次都重新安装(react-native run-android)之外,还有另外一种方法可以直接发起重新加载最新文件内容。
-
Reload
如果是模拟器(Simulator),那么就直接点击模拟器窗口,然后快速按下两次R,即可完成重新加载动作。
如果是实体手机,则需要摇一摇手机,然后app会自动弹出一个悬浮窗口,只需点击Reload即可完成重新加载动作。如果摇一摇不起作用,那请参考 问题记录 的 3.
红米 Note 3 -
Enable Live Reload
开启该功能之后,只要文件发生变化,则会即时的更新到手机设备上,这种场景适合调试样式时开启,不适合在开发功能时开启。 -
Console Log
javascript/EcmaScript 的日志输出是利用console.log('xxx'),在react native中也支持这种写法,这有利于我们即时调试代码时进行日志观察。C:\Users\zhengtong\WebstormProjects\rn_practice>react-native log-android
问题记录
1. adb devices没有列出任何东西
这是因为手机默认情况下,不是开发者模式,需要去开启开发者模式:
设置
-> 关于手机
-> MIUI版本(连续点击7次即可变为开发者模式)
开启开发者模式之后,仍需开启USB连接:
设置
-> 系统和设备
-> 更多设置
-> 开发者选项
-> 开启USB调试
2. 会话连接失败
Installing APK 'app-debug.apk' on 'Redmi Note 3 - 5.1.1'
Unable to install C:\Users\zhengtong\WebstormProjects\rn_practice\android\app\build\outputs\apk\app-debug.apk
com.android.ddmlib.InstallException: Failed to establish session
at com.android.ddmlib.Device.installPackages(Device.java:894)
at com.android.builder.testing.ConnectedDevice.installPackages(ConnectedDevice.java:113)
at com.android.builder.testing.ConnectedDevice$installPackages$0.call(Unknown Source)
解决办法:
关闭 <MIUI优化>
设置
-> 系统和设备
-> 更多设置
-> 开发者选项
-> 启用MIUI优化
参考网址: http://blog.csdn.net/eric_niezhangyu/article/details/51692297
3. 实体手机摇一摇没有出现开发者菜单
授权显示悬浮窗口
设置
-> 设备
-> 授权管理
-> 应用权限管理
-> 权限管理
-> 显示悬浮窗
-> 找到并勾选允许react native项目app显示悬浮窗口
4. 无法连接开发服务器
正常情况下,调试APP时都是接上USB连接线,但是很多时候会因为一些事情而带着手机离开电脑旁边,当在回来接上USB后,摇一摇手机点击Reload时会抛出异常错误(红色屏幕),错误信息如下:
Could not connect to development server.
Try the following to fix the issue:
...
...
URL: http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false
解决办法:
C:\Users\zhengtong\WebstormProjects\rn_practice>adb reverse tcp:8081 tcp:8081
通过上面这条命令,会告诉adb向手机发送指令,通知其服务可正常连接。
网友评论