React Native 系列【一】环境安装及 Debug

发表于

SymAPP Demo

ToC

安装环境

  1. 打开 App Store 安装 Xcode
  2. 安装 Android Studio
  3. 安装依赖
    1
    2
    3
    brew install node
    brew install watchman
    npm install -g react-native-cli

据说有个 Create React Native App，不需要安装以上东西。但是我到现在都没装成功，有兴趣的小伙伴可以看看。

创建项目

1
2
3
4
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
react-native run-android

异常处理

Simulator 页面报错

现象

运行 react-native run-ios 后，在 Simulator 中显示 cannot find entry file index.ios.js in any of the roots

解决方案

打开 Xcode 手动 build，在项目根目录下使用 npm start。
注：应该是有什么配置不对，但是对 iOS 集成 RN 的配置不熟悉，后面再研究。上次没碰到这个情况，用 Erik 小宝宝的话说就是“好奇怪”

gradle 下载

现象

运行 react-native run-android 后，一直在 Downloading https://services.gradle.org/distributions/gradle-2.14.1-all.zip…

解决方案

  1. 到 http://services.gradle.org/distributions/ 中下载 AwesomeProject/android/gradle/wrapper/gradle-wrapper.properties 文件中 distributionUrl 对应的版本
  2. 配置 Android Studio proxy 为 http://mirrors.neusoft.edu.cn
  3. 修改 maven 镜像为 http://maven.aliyun.com/nexus/content/groups/public/
  4. 打开 Android Studio，会自动 sync gradle 并生成和 gradle 版本对应的目录，如：/Users/Vanessa/.gradle/wrapper/dists/gradle-2.14.1-all/8bnwg5hd3w55iofp58khbp6yv
  5. 关闭 Android Studio
  6. 第一步下载好的文件拷贝到 /Users/Vanessa/.gradle/wrapper/dists/gradle-2.14.1-all/8bnwg5hd3w55iofp58khbp6yv 下，其余版本以此类推
  7. 重新开启 Android Studio，sync gradle
  8. 等待等待等待

调试

iOS

我没有 iPhone，只能用模拟机了，一定要记住 ⌘R 和 ⌘D 这两个快捷键

Android

模拟机太卡，我只能用真机了

  1. 手机打开开发者模式，一般就在 Android 版本号上不停点击
  2. 用 USB 链接手机，好久前看过安个啥就可以不用 USB 了
  3. 使用 react-native run-android 或者 Android Studio 安装到手机上
  4. 对次应用设置允许弹出“浮窗”
  5. 摇一摇，弹出类似 iPhone 模拟机 ⌘D 的开发设置
  6. 选择 Dev Settings，点击 Debug Server host & port for device 设置你电脑的 ip 和 npm start 的端口号，默认为 8081
  7. 开心的玩耍吧

Chrome

  1. Simulator 中⌘D 选择 Debug JS Remotely
  2. Chrome 打开 http://localhost:8081/debugger-ui ，多了个 Dark Theme，开心
  3. Chrome ⌘⌥I 打开开发者工具
  4. Simulator ⌘R 刷新

fbe5215b79694ada97e7771049222eda-image.png

react-devtools

1
2
npm install -g react-devtools
react-devtools

Simulator ⌘D 选择 Show Inspector

8588c6f2fde644e9a2763eebef7967b4-image.png