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. 最终效果
   
   

   
   

   最终效果

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. 实体手机摇一摇没有出现开发者菜单

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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。