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.<anonymous> (/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.<anonymous> (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连接你的本地开发服务器,下面的步骤我没试过,不过应该是真的。

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

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

真机白屏

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


参考 http://www.cnblogs.com/kaiye/p/4937191.html http://www.race604.com/react-native-for-android-start/ https://github.com/facebook/react-native/issues/3456 http://reactnative.cn/docs/0.22/running-on-device-android.html#content http://reactnative.cn/docs/0.22/getting-started.html#content http://reactnative.cn/docs/0.22/android-setup.html#content

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏情情说

RabbitMQ实战:界面管理和监控

上一篇总结了可能出现的异常场景,并对RabbitMQ提供的可用性保证进行了分析,在出现服务器宕机后,仍然可以正常服务。另外,需要尽快恢复异常的服务器,重新加入集...

1.1K10
来自专栏张戈的专栏

Linux系统防CC攻击自动拉黑IP增强版Shell脚本

最新更新:张戈博客已推出功能更强大的轻量级 CC 攻击防御脚本工具 CCKiller==>传送门 前天没事写了一个防 CC 攻击的 Shell 脚本,没想到这么...

7595
来自专栏.net core新时代

nginx+iis实现负载均衡

  最近在研究分布式系统架构方面的知识,包括负载均衡,数据库读写分离,分布式缓存redis等。本篇先从负载均衡服务架构入手,关于负载均衡百度百科的定义如下:负载...

3418
来自专栏CaiRui

ntp服务配置

在linux系统中,为了避免主机时间因为长时间运行下所导致的时间偏差,进行时间同步(synchronize)的工作是非常必要的。linux系统下,一般使用nt...

57910
来自专栏JMCui

Git + Maven + Jenkins 实现自动化部署

一、安装 和 准备工作     我们选择了用 Tomcat 服务器下 war 包的安装方式。Jenkins 的下载地址:http://mirrors.jenki...

7326
来自专栏知无涯

PHP5.4+Apache2.2+Mysql5.0+PHPMyAdmin3.2.5安装配置

52111
来自专栏MongoDB中文社区

深入浅出MongoDB复制

笔者最近在生产环境中遇到许多复制相关问题,查阅网上资料发现官方文档虽然系统但是不够有深度,网上部分深度文章则直接以源码展示,不利于大家了解。所以本文则是结合前两...

2013
来自专栏雪胖纸的玩蛇日常

django2+uwsgi+nginx上线部署到服务器Ubuntu16.04(最新最详细版)

3406
来自专栏Danny的专栏

【玩转Eclipse】——eclipse实现代码块折叠-类似于VS中的#region……#endregion

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

1103
来自专栏黑泽君的专栏

安装最新版本的Oracle公司的虚拟机软件 VirtualBox + 安装虚拟机 Windows XP 系统 + 安装 Oracle 11g 软件 + 出现 ERROR: ORA-12541: TNS

  VirtualBox的下载链接:https://www.virtualbox.org/wiki/Downloads

2571

扫码关注云+社区

领取腾讯云代金券