React-Native For Android 环境搭建及踩坑

本文默认以MacOS为系统，毕竟除了用React Native搞Android,你也会想用它搞iOS。

首先当然是Android的环境搭建，这里还是推荐把整个Android开发环境都弄起来，顺便还可以学学Android。关于Android环境搭建，以及使用Android Studio可以参考我的另一篇文章搭建安卓开发环境(Android Studio) 这里就不赘述了,需要注意的是，要安装好SDK,AVD(不是AV,是Android Virtual Device)。

弄好Android开发环境之后，就是搭建RN的环境.

安装brew

安装方法看文档吧，Homebrew,安装好之后，安装安装watchman，在命令行中输入brew install watchman

安装Node.js

安装Node.js 4.0或更高版本。

推荐使用nvm来管理node版本，安装 nvm，安装文档，然后运行nvm install node && nvm alias default node，这将会默认安装最新版本的node并且设置好命令行的环境变量，可以使用node -v命令来查看当前node版本。

安装好之后把nvm加入环境变量里面

export NVM_DIR="/Users/xxxxx/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

不过也许你之前装过node,那么这里有坑，你要看看自己之前装的node是什么版本，实际RN在编译项目的时候会使用系统的node。

如果不幸，你系统node版本是0.XXX，那么需要先卸载已安装到全局的node和npm,不然在后面编译RN工程的时候会报错：

    Installing react-native package from npm...
    /Users/vasavi/dev/CLOUDSEED_APP/AwesomeProject/node_modules/react-native/local-cli/init.js:7
    class CreateSuppressingTerminalAdapter extends TerminalAdapter {
    ^^^^^
    SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object. (/Users/vasavi/dev/CLOUDSEED_APP/AwesomeProject/node_modules/react-native/local-cli/cli.js:11:12)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

首先查看已经安装在全局的模块，以便删除这些全局模块后再按照不同的 node 版本重新进行全局安装，运行命令npm ls -g --depth=0

之后删除全局node_modules和node

#删除全局 node_modules 目录
sudo rm -rf /usr/local/lib/node_modules 
#删除 node
sudo rm /usr/local/bin/node 
#删除全局 node 模块注册的软链
cd  /usr/local/bin && ls -l | grep "../lib/node_modules/" | awk '{print $9}'| xargs rm

然后安装nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

初始化工程

安装好node环境之后，就可以安装React Native并初始化工程脚手架了。

执行init时切记不要在前面加上sudo（否则新项目的目录所有者会变为root而不是当前用户，导致一系列权限问题，需要使用chown修改。

$ npm install -g react-native-cli
$ react-native init AwesomeProject

由于某些原因，安装起来可能非常麻烦，各种不成功，建议设置国内的镜像。

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

配置Android环境变量

确保ANDROID_HOME环境变量已经设置并路径正确。可以使用export | grep ANDROID命令来检查。

如果你使用的是bash，那就在~/.bashrc文件中加入以下内容，如果是用zsh，那就是~/.zshrc。

# 如果是通过Android Studio来安装的话多半在这里：
export ANDROID_HOME=~/Library/Android/sdk
# 如果你是通过Homebrew安装SDK的，则加入下列路径
export ANDROID_HOME=/usr/local/opt/android-sdk

开始工程

进入AwesomeProject，然后运行：

$ react-native run-android

如果没有任何错误，那你牛逼了，恭喜。如果出错了，请往下看。

遇到错误：

* What went wrong:
A problem occurred configuring project ':app'.
> failed to find Build Tools revision 23.0.1

这是由于在RN Android的默认设置中，使用的Android默认构建版本是23.0.1而你很可能并没有安装这个版本的SDK，比如bo主装了23.0.2。打开AwesomeProject/android/app/build.gradle文件，找到这里配置的版本号，改成你系统安装了的，系统安装了的可以在Android SDK Manager中查看。如下，我就改成了23.0.2

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"
    .
    .
    .
}

如果报错：

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: No connected devices!

很明显，没有创建设备，建个虚拟设备，或者插上Android手机就可以了，详细的可以看上面说的安卓环境搭建。

如果报错：

dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib  
  Referenced from: /usr/local/bin/watchman
  Reason: image not found

dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib  
  Referenced from: /usr/local/bin/watchman
  Reason: image not found

Watchman:  watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib  
  Referenced from: /usr/local/bin/watchman
  Reason: image not found

 ERROR  watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
  Referenced from: /usr/local/bin/watchman
  Reason: image not found

Error: watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib  
  Referenced from: /usr/local/bin/watchman
  Reason: image not found

    at ChildProcess. (/Users/Jing/Projects/ReactNative/AwesomeProject/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:194:18)
    at emitTwo (events.js:87:13)
    at ChildProcess.emit (events.js:172:7)
    at maybeClose (internal/child_process.js:817:16)
    at Socket. (internal/child_process.js:319:11)
    at emitOne (events.js:77:13)
    at Socket.emit (events.js:169:7)
    at Pipe._onclose (net.js:469:12)

据说是因为pcre找不到，运行命令brew uninstall pcre && brew install pcre

如果出错：

Error: The `brew link` step did not complete successfullyThe formula built, but is not symlinked into /usr/localCould not symlink lib/libpcre.1.dylib

/usr/local/lib is not writable.

可以将brew转到root模式： sudo chown root:admin /usr/local/bin/brew 重新连接： sudo brew link pcre 再切回来： sudo chown xxxx:admin /usr/local/bin/brew

真机调试

首先要开启USB调试。

之后使用adb devices就可以看到设备了，包括模拟器和真是设备。
另外需要注意，如果同时列出有多个设备(包括)，后续编译工程可能会报错，所以最好确保只有一个设备。

之后同样是使用react-native run-android命令。

Android 5.0以上

Android 5.0以上需要使用adb reverse命令。
首先把你的设备通过USB数据线连接到电脑上，并开启USB调试。

运行adb reverse tcp:8081 tcp:8081 不需要更多配置，你就可以使用Reload JS和其它的开发选项了，按Menu键或者摇晃手机，就可以打开开发者菜单了。

Android 5.0以下

Android 5.0以下需要通过Wi-Fi连接你的本地开发服务器，下面的步骤我没试过，不过应该是真的。

首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
在设备上运行你的React Native应用。和打开其它App一样操作。
你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
摇晃设备，或者运行adb shell input keyevent 82，可以打开开发者菜单。
点击进入Dev Settings。
点击Debug server host for device。
输入你电脑的IP地址和端口号（譬如10.0.1.1:8081）。在Mac上，你可以在系统设置/网络里找查询你的IP地址。在Windows上，打开命令提示符并输入ipconfig来查询你的IP地址。在Linux上你可以在终端中输入ifconfig来查询你的IP地址。
回到开发者菜单然后选择Reload JS。

adb命令找不到

如果提示adb命令找不到，做个软连接就好了。
sudo ln -sf /Users/xxxx/Library/Android/sdk/platform-tools/adb /usr/local/bin/adb

真机白屏

这个在国内手机还是比较常见，比如bo主的小米。这个是因为系统中默认都禁止了应用的显示悬浮窗这个权限，在手机中设置为允许就可以了。
路径大致在设置 -> 其他应用管理 -> 选择相应的应用 -> 权限管理 -> 点击“显示悬浮窗”这个权限，将该权限设置为允许

参考
www.cnblogs.com/kaiye/p/493… www.race604.com/react-nativ… github.com/facebook/re… reactnative.cn/docs/0.22/r… reactnative.cn/docs/0.22/g… reactnative.cn/docs/0.22/a…