技术

React Native for Android 环境搭建-坑

准备工作

  • 操作系统：OSX

基本环境

Homebrew

新安装

1
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

已安装-务必更新

1
2
3
4
cd /usr/loacl
git fetch origin
git reset --hard origin/master
brew update

Nodejs

安装 nvm

1
2
brew install curl  # 确保安装了 curl
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

安装 Nodejs

此处需要安装4.0以上版本

1
nvm install node && nvm alias default node

NPM 国内源

1
2
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

watchman

watchman 是 Facebook 的一个用于监控文件变更并触发指定操作的工具：

1
brew install watchman

flow

Flow 是一个 JavaScript 的静态类型检查器，建议安装它，以方便找出代码中可能存在的类型错误：

1
brew install flow

Android SDK

SDK:

  • Android SDK Tools
  • Android SDK Platform-tools
  • Android SDK Build-tools
  • Android SDK Platform
  • Android Support Repository

    模拟器

  • API 19以上

    环境变量

  • ANDROID_SDK
  • ANDROID_NDK

详细介绍可以参考 这篇文章 。

React Native

1
npm install -g react-native-cli

使用步骤

新建工程

1
react-native init demoProject

运行工程

1
react-native run-android

常见问题

启动速度慢

Android App使用 gradle 打包，在第一次启动时，会下载 gradle 和相应的依赖包，所以会造成启动速度缓慢。可以自行修改 app 中 /android/gradle.properties的配置，使用本地已经配置好的环境优化启动速度。

端口占用

如果 Running Packager 提示 “Packager can’t listen on port 8081” ，说明 8081 端口被占用，可以检查是什么程序占用了这个端口并杀掉它：

1
2
$ sudo lsof -n -i4TCP:8081 | grep LISTEN
$ kill -9 <进程id>

加载失败

加载失败
你还需要进行如下设置：

  • 更新 brew 和 watchman ：brew update && brew upgrade watchman；参考 brew 安装中的说明
  • 按下菜单按钮呼出菜单
    菜单
    然后点击【Dev Settings】菜单项进入应用的选项界面，再点击【Debug server host for device】选项，填入你的Mac主机的 ip，然后重启 APP ；
    Debug server host for device
    其他选项，按需勾选。
    Auto reload on JS Change - 自动刷新界面

Example App

下载

1
2
git clone https://github.com/facebook/react-native.git
git checkout 0.13-stable

注意选择稳定分支，不要使用 master 分支

运行

Exmaple App 中，Movies 和 UIExplorer 两个是 IOS 和 Android 都可以的，剩下俩个都是只有 IOS 版本的。这两个 APP 和上面说的通过 react-native init方式创建的不同，需要使用不同的方式来启动。
详情

安装依赖

  • react-native依赖

    1
    2
    cd react-native
    npm install

  • Android
    需要 SDK、Build-tools、NDK、Emulator

编译基础

1
2
cd react-native
./gradlew :ReactAndroid:assembleDebug

编译运行

编译过程中需要下载依赖包，所以要耐心等待。

  • UIExplorer

    1
    2
    3
    cd react-native
    ./gradlew :Examples:UIExplorer:android:app:installDebug
    ./package./packager/packager.sh

  • Movies

    1
    2
    3
    cd react-native
    ./gradlew :Examples:Movies:android:app:installDebug
    ./package./packager/packager.sh