← 返回首页

React Native 环境安装

Windows / Ubuntu / CentOS 上的 React Native 环境配置。

发布 2017年11月28日 标签 #mobile #react-native #android

~/posts/react-native-install $ cat post.md

/ 语言 EN / 中文
/ 主题 / /

整理一下 React Native 基础环境的安装步骤和常见问题。

基础库

Windows

choco install python2
choco install adb
npm install -g react-native-cli

Linux (deb)

sudo apt-get install python2
sudo apt-get install adb
sudo npm install -g react-native-cli

Linux (CentOS)

sudo yum install python2
sudo yum install adb
sudo npm install -g react-native-cli

Node 和镜像源

没装过 Node 的机器才需要这一步。

Windows

choco install nodejs.install
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm install -g yarn
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

Linux (deb)

sudo apt-get install nodejs.install
sudo npm config set registry https://registry.npm.taobao.org --global
sudo npm config set disturl https://npm.taobao.org/dist --global
sudo npm install -g yarn
sudo yarn config set registry https://registry.npm.taobao.org --global
sudo yarn config set disturl https://npm.taobao.org/dist --global

Linux (CentOS)

sudo yum install nodejs.install
sudo npm config set registry https://registry.npm.taobao.org --global
sudo npm config set disturl https://npm.taobao.org/dist --global
sudo npm install -g yarn
sudo yarn config set registry https://registry.npm.taobao.org --global
sudo yarn config set disturl https://npm.taobao.org/dist --global

开启 Gradle Daemon

(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")

用 Android Studio 安装 Android SDK

安装时确保选上的组件

SDK 和 API 23（Marshmallow）默认会装。

  • Performance (Intel HAXM)
  • Android Virtual Device

安装完成后需要补上的组件

实际跑 Android Studio 编译时缺什么会自动装，但用 RN 时手动选好更省事：

  • SDK Platforms
    • Android 6.0 (Marshmallow)
      • Google APIs（大多数情况下默认装）
      • Android SDK Platform 23
      • Intel x86 Atom System Image
      • Intel x86 Atom_64 System Image
      • Google APIs Intel x86 Atom_64 System Image
  • SDK Tools
    • Android SDK Build Tools
      • Android SDK Build-Tools 23.0.1
      • Android Support Repository

默认会装 Build-Tools 23.0.3 等。如果只走 RN 路径用不到的，可以卸掉。

几乎一定会有失败的依赖包——看错误信息重装即可，反复几次直到全部装好。

Windows 环境变量（其他系统忽略）

  • 把 Android SDK 安装路径设到 ANDROID_HOME。
  • 把 Android SDK 的 tools 路径加入 PATH。

模拟器

任选其一，Android Studio 自带的也能用：

  • Visual Studio Emulator for Android
  • Genymotion

测试项目

react-native init someProject
cd someProject
react-native run-android

查看应用在模拟器中的日志

adb logcat *:S ReactNative:V ReactNativeJS:V

在真机运行

确认设备已连上

adb devices

包括模拟器在内，同时只接一台设备。

跑起来

react-native run-android

连调试服务器

Android 5.0 (Lollipop) 以上

reverse 命令直接用默认设置连：

adb reverse tcp:8081 tcp:8081

如果连不上，先摇晃手机 reload JS 试试。除了 Android 版本，玄学因素也可能影响。

Android 5.0 (Lollipop) 以下

先获取调试机的局域网 IP：

ipconfig

然后按以下步骤操作：

  • 把设备连到和调试机同一个 wifi 下。
  • 启动应用（直接打开或 react-native run-android）。
  • 摇晃设备打开开发者菜单。
  • 进 Dev Settings。
  • 点 Debug server host for device。
  • 填入刚才获取的 IP + 端口（一般是 8081）。
  • 返回，或再摇一下设备。
  • 点 Reload JS。

附：把 init 出来的工程直接推到 GitHub

echo "anything" >> README.md
git init
git add .
git remote add origin https://github.com/somewhere.git
git push -u origin master
← 返回首页