在linux上搭建react-native android开发环境防坑指南

笔者接触react native一个星期,可以说是趟坑无数,愤懑不已,所以炼制这篇文章希望后来者能够少走弯路。
我一开始是在windows上面成功搭建这个开发环境,因为笔者不喜欢windows蹩脚到命令行,所以还是装了ubuntu系统,继续追求我高效率的开发体验。

首先看官可以移步这个官方文档。按照这个文档一步步执行就行了,笔者后面主要献上这个文档到疏漏和防坑36计。

Java和android环境变量一定要精确配置好

这个是做安卓开发到基础,很多次了,话休烦絮,直接献上笔者的配置文件内容

sudo gedit ~/.profile

#Android Environment
export ANDROID_HOME=~/Android/sdk

#Java env
export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-amd64
export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib:$JAVA_HOME/jre/lib

export PATH=$PATH:$JAVA_HOME/bin:$JAVA_HOME/jre/bin:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

关于Android SDK的一些要求

  • 官方说一定要装build tools 23.0.1,但是笔者那天网络不好,偏偏下载不下这个版本。怎么办,编译工程直接报错。
    于是笔者修改了工程中build.gradle文件中到相关配置选项buildToolsVersion "23.0.1",修改成你当前sdk包里面已有的版本,比如25.0.1。
    之所以官方说要23.0.1是因为初始化工程的时候默认配置是这个。
  • minSdkVersion 16,在build.gradle中一定注意这个,16是facebook支持到最小api,切记切记!笔者到工程又一次因为是15,半天没查处原因。

关于效率的一些做法

  • 初始化工程之前务必添加淘宝镜像源,不然你就准备等半天吧,有时还会因为timeout导致失败。具体的,在终端执行

npm config set registry https://registry.npm.taobao.org

然后检查是否设置成功:

npm config list

然后再初始化工程:

react-native init MyProject

  • 运行工程之前,把gradle离线到本地并引用,不然比上一步还慢!具体做法是打开项目工程下gradle/wrapper/gradle-wrapper.properties这个文件,查看distributionUrl这个值是那个gradle的版本,然后去这个链接,把相应到版本下载到本地,比如说home/phoobobo/gradle/gradle-2.4-all.zip这个路径,那么你修改distributionUrl这个值distributionUrl=file:///home/phoobobo/gradle/gradle-2.4-all.zip
    执行完上述操作再通过终端命令react-native run-android运行工程或者在android studio直接运行工程,会很快。

必须安装watchman!

必须安装watchman!必须安装watchman!必须安装watchman!重要的事情说三遍!我就因为没有安装watchman后面浪费到时间不计其数,虽然临时用其他办法解决了,但是最终卡在这里过不去了。
如果不装,经常会出现这样到问题:

watch /home/boolean/Workspace/react-native-TIMMangaerDemo_android/android/sdklibrary/build/intermediates/rs/androidTest/debug ENOSPC
{"code":"ENOSPC","errno":"ENOSPC","syscall":"watch /home/boolean/Workspace/react-native-TIMMangaerDemo_android/android/sdklibrary/build/intermediates/rs/androidTest/debug","filename":"/home/boolean/Workspace/react-native-TIMMangaerDemo_android/android/sdklibrary/build/intermediates/rs/androidTest/debug"}
Error: watch /home/boolean/Workspace/react-native-TIMMangaerDemo_android/android/sdklibrary/build/intermediates/rs/androidTest/debug ENOSPC
at exports._errnoException (util.js:911:11)
.......

有没有发现里面好多“watch”?开始我是通过删除build目录,重新build工程,问题有很多次得到解决,后面就再也不行了。然后我想起官方文档里有推荐安装watchman,说可以解决文件监控到某些bug。第一次装到时候执行./autogen.sh 不成功,然后觉得这个东西是可选项,所以就没装。后来我猜可能就是这个导致的问题。

按照常规方法安装watchman之前需要

linux安装watchman先要安装依赖

sudo apt-get install autoconf automake python-dev

然后如官方的做法依次执行

git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.7.0 # 这是facebook官方文档说的最新稳定版本
./autogen.sh
./configure
make
sudo make install

刚安装完watchman,运行react-native start会报这样到错误

ERROR A non-recoverable condition has triggered. Watchman needs your help!
The triggering condition was at timestamp=1481104643: inotify-add-watch(/home/boolean/Workspace/react-native-TIMMangaerDemo_android/android/reactnativelibrary/build/generated/source/r/debug) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem. You will find more information on fixing this at
https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch

去facebook的网站看了相关说明以后知道是inotify-add-watch的问题,但是不知道如何去增加这个限制。后来又去watchman的安装说明网站。看到如下说明

You obviously need to ensure that max_user_instances and max_user_watches are set so that the system is capable of keeping track of your files.
/proc/sys/fs/inotify/max_user_watches impacts how many dirs you can watch across all watched roots.

那么怎么调整max_user-watches的值呢。查找以后,发现这是内核的东西,不好轻易改变,需要用下面到方法:

sudo su
vim /etc/sysctl.conf


在文件里面添加`**fs.inotify.max_user_watches=16384**`(这个是系统默认值到两倍,够用了),:wq保存
然后运行`/sbin/sysctl -p`使其立即生效
使用`sysclt -a`可以看到`fs.inotify.max_user_watches = 16384`
或者直接查看`/proc/sys/fs/inotify/max_user_watches`这个文件(切勿直接修改这个文件,因为即使你修改了当时生效,等你重启电脑,这个值又会恢复默认)。

好了,再运行`react-native start`就OK了

#关于用真机调试
* 和你的浏览器端不在同一wifi环境,可以直接调试,linux需要手动启动react packager:
>`react-native start`

 这个命令你可以在工程编译运行之后执行。
另外,如果你中途有断开usb连接,那么需要执行
>`adb reverse tcp:8081 tcp:8081`

* 和你的浏览器端在同一wifi环境下
此时需要你查找本机ip地址和端口,然后摇晃手机,在device settings里设置ip地址和端口。

另外,有时候你会遇到这样的问题:
>{你的app 名字} has not been registered. This is other due to a require() error during initialization...

这可能是你的packager是另外一个工程的,而且占用了8081的端口。解决办法就是stop目前的packager,然后在工程目录下重启packager:

```shell
react-native start

好了,先讲这么多,后面遇到坑再补充
另外预告下,笔者不久后会出react-native android插件开发的文章,敬请关注

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,980评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,422评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,130评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,553评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,408评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,326评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,720评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,373评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,678评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,722评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,486评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,335评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,738评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,283评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,692评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,893评论 2 335

推荐阅读更多精彩内容