React Native - Getting Started
文章目录

React Native: Getting Started

截止日期 2018 年 12 月 30 日

Windows + Android, 其他的环境不考虑, 反正我也不可能用其他环境来进行开发的

Requirements2019-06-13 12:35:02 星期四

  1. Node (≥8.3)

    • 查看版本的方法: node -v
  2. Python (=2.X, 3.X 不支持)

    • 电脑中可以同时安装二和三两个版本, 将其中一个路径设置为环境变量即可 (就是下方将 python2 改为 python3)

    • 需要同时设置两个环境变量到系统变量 path

      1
      2
      D:\Tools_For_Work\Python2\Scripts\
      D:\Tools_For_Work\Python2\
      1
      2


  3. JDK(=1.8, 1.9 暂时不支持)

    • 查看版本的方法: java -version
    • JDK 和 JAVA 不是同一个东西!!! 虽然都有 java.exe
    • 下载 JDK 之后,直接将 JDK 根目录用作环境变量 JAVA_HOME: D:\Tools_For_Work\SDK\JDK
      • 注意设置环境变量的时候不要进入到 bin 文件夹, 并且在环境变量数值结尾不要加分号
  4. react-native-cli

  5. Android Studio

    1. Android SDK
    2. ANDROID_HOME

后面两个直接参考 官方文档

Development & Debug

上方配置完成之后应该就可以使用 adb 了.

可以使用实体机,或者用虚拟机进行调试

在项目根目录即可启动调试

1
react-native run-android

Hot Reload

晃动手机或者点击菜单键会出现调试菜单,然后就可以点击开启 HR

Chrome Debug

有些时候我们想要看到 console.log() 之类的 JS 的输出, 这个时候就需要 Chrome 进行调试

首先在手机端晃动手机选择 Remote JS Debugging

然后 Chrome 上就应该会自动打开一个页面: [http://localhost:8081/debugger-ui/](http://localhost:8081/debugger-ui/

Enable Http Network Debug[^ 1]

默认情况下无法进行 Http 请求请求的查看, 最简单的解决方式:

index.js 里面加上这行:

1
2
XMLHttpRequest = GLOBAL.originalXMLHttpRequest ?
GLOBAL.originalXMLHttpRequest : GLOBAL.XMLHttpRequest;

然后和原来一样调试就可以看到 http 请求详细了:

可能需要额外做的操作:

You will also need a Chrome plugin that overrides CORS. I use CORS Toggle. You may also decide to skip the plugin and start Chrome with CORS disabled:

1
chrome --disable-web-security

then, as usually, start remote debugging from your app, and open: http://localhost:8081/debugger-ui on your computer.