笔者接触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插件开发的文章,敬请关注