美文网首页native
react-native--03开发环境&真机调试

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

作者: 极光火狐狸 | 来源:发表于2017-01-12 00:08 被阅读1349次

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

    授权显示悬浮窗口
    设置 -> 设备 -> 授权管理 -> 应用权限管理 -> 权限管理 -> 显示悬浮窗 -> 找到并勾选允许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向手机发送指令,通知其服务可正常连接。

    相关文章

      网友评论

        本文标题:react-native--03开发环境&真机调试

        本文链接:https://www.haomeiwen.com/subject/dqcdbttx.html