react-native--03开发环境&真机调试

IDE -> WebStorm

目前市面上的IDE,有知名的Sublime和jetbrains,其中jetbrains有一系列的IDE支持多种语言,如JAVA(IntelliJ IDEA)、Python(Pycharm)、Ruby(RubyMine)、Javascript/html/css(WebStorm),由于我本人长期开发Python,采用的是Pycharm,因此我个人倾向与采用WebStorm作为react native的IDE开发工具。

安装到手机

  1. 用usb线对接上 电脑 和 手机.
  2. 查看设备是否已经连接.
    C:\Users\zhengtong>adb devices
    List of devices attached
    5b921483        device   
    
    注意:如果这里没有列出任何东西, 请参考 问题记录 的 1. adb device没有列出任何东西.
  3. 启动项目
    C:\Users\zhengtong\WebstormProjects\rn_practice>react-native start
    C:\Users\zhengtong\WebstormProjects\rn_practice>react-native run-android
    
    注意:如果项目启动过程中出现错误,请参考 问题记录 的 2. 会话连接失败.
  4. 最终效果
    react-native--03开发环境&真机调试_第1张图片

    最终效果

Debugging(调试)

代码写完了之后,除了每次都重新安装(react-native run-android)之外,还有另外一种方法可以直接发起重新加载最新文件内容。

  • Reload
    如果是模拟器(Simulator),那么就直接点击模拟器窗口,然后快速按下两次R,即可完成重新加载动作。
    如果是实体手机,则需要摇一摇手机,然后app会自动弹出一个悬浮窗口,只需点击Reload即可完成重新加载动作。如果摇一摇不起作用,那请参考 问题记录 的 3.
    react-native--03开发环境&真机调试_第2张图片

    红米 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优化

参考网址: http://blog.csdn.net/eric_niezhangyu/article/details/51692297

3. 实体手机摇一摇没有出现开发者菜单

3.1、去手机设置里把该app的悬浮窗权限打开
3.2、全局安装 npm i react-native-cli -g

授权显示悬浮窗口
设置 -> 设备 -> 授权管理 -> 应用权限管理 -> 权限管理 -> 显示悬浮窗 -> 找到并勾选允许react native项目app显示悬浮窗口

参考网址: http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E5%BA%94%E7%94%A8%E8%AE%BE%E5%A4%87%E8%BF%90%E8%A1%8Crunning%E4%BB%A5%E5%8F%8A%E8%B0%83%E8%AF%95debugging/

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向手机发送指令,通知其服务可正常连接。



作者:极光火狐狸
链接:https://www.jianshu.com/p/0e768f6a83c2
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

你可能感兴趣的:(react,native)