筆者接觸react native一個(gè)星期斋射，可以說(shuō)是趟坑無(wú)數(shù)但荤，憤懣不已腹躁，所以煉制這篇文章希望后來(lái)者能夠少走彎路。
我一開(kāi)始是在windows上面成功搭建這個(gè)開(kāi)發(fā)環(huán)境哑了，因?yàn)楣P者不喜歡windows蹩腳到命令行弱左，所以還是裝了ubuntu系統(tǒng)，繼續(xù)追求我高效率的開(kāi)發(fā)體驗(yàn)拆火。
首先看官可以移步這個(gè)官方文檔。按照這個(gè)文檔一步步執(zhí)行就行了们镜，筆者后面主要獻(xiàn)上這個(gè)文檔到疏漏和防坑36計(jì)。
Java和android環(huán)境變量一定要精確配置好
這個(gè)是做安卓開(kāi)發(fā)到基礎(chǔ)颈抚，很多次了嚼鹉，話(huà)休煩絮贩汉，直接獻(xiàn)上筆者的配置文件內(nèi)容
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
關(guān)于A(yíng)ndroid SDK的一些要求
- 官方說(shuō)一定要裝build tools 23.0.1，但是筆者那天網(wǎng)絡(luò)不好锚赤，偏偏下載不下這個(gè)版本雾鬼。怎么辦，編譯工程直接報(bào)錯(cuò)宴树。
于是筆者修改了工程中build.gradle文件中到相關(guān)配置選項(xiàng)buildToolsVersion "23.0.1"策菜，修改成你當(dāng)前sdk包里面已有的版本，比如25.0.1酒贬。
之所以官方說(shuō)要23.0.1是因?yàn)槌跏蓟こ痰臅r(shí)候默認(rèn)配置是這個(gè)又憨。 -
minSdkVersion 16，在build.gradle中一定注意這個(gè)锭吨，16是facebook支持到最小api蠢莺，切記切記祸憋！筆者到工程又一次因?yàn)槭?5，半天沒(méi)查處原因巍沙。
關(guān)于效率的一些做法
- 初始化工程之前務(wù)必添加淘寶鏡像源允乐，不然你就準(zhǔn)備等半天吧敞临，有時(shí)還會(huì)因?yàn)閠imeout導(dǎo)致失敗。具體的，在終端執(zhí)行
npm config set registry https://registry.npm.taobao.org
然后檢查是否設(shè)置成功：
npm config list
然后再初始化工程：
react-native init MyProject
- 運(yùn)行工程之前，把gradle離線(xiàn)到本地并引用凿滤，不然比上一步還慢溪椎！具體做法是打開(kāi)項(xiàng)目工程下
gradle/wrapper/gradle-wrapper.properties這個(gè)文件，查看distributionUrl這個(gè)值是那個(gè)gradle的版本，然后去這個(gè)鏈接，把相應(yīng)到版本下載到本地，比如說(shuō)home/phoobobo/gradle/gradle-2.4-all.zip這個(gè)路徑哀墓，那么你修改distributionUrl這個(gè)值distributionUrl=file:///home/phoobobo/gradle/gradle-2.4-all.zip贾漏。
執(zhí)行完上述操作再通過(guò)終端命令react-native run-android運(yùn)行工程或者在android studio直接運(yùn)行工程，會(huì)很快。
必須安裝watchman县好！
必須安裝watchman！必須安裝watchman！必須安裝watchman！重要的事情說(shuō)三遍！我就因?yàn)闆](méi)有安裝watchman后面浪費(fèi)到時(shí)間不計(jì)其數(shù)隅俘，雖然臨時(shí)用其他辦法解決了捣卤，但是最終卡在這里過(guò)不去了哥捕。
如果不裝凫佛，經(jīng)常會(huì)出現(xiàn)這樣到問(wèn)題：
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)
.......
有沒(méi)有發(fā)現(xiàn)里面好多“watch”瓮栗？開(kāi)始我是通過(guò)刪除build目錄职辨，重新build工程，問(wèn)題有很多次得到解決，后面就再也不行了。然后我想起官方文檔里有推薦安裝watchman豌汇，說(shuō)可以解決文件監(jiān)控到某些bug梅尤。第一次裝到時(shí)候執(zhí)行./autogen.sh 不成功，然后覺(jué)得這個(gè)東西是可選項(xiàng)，所以就沒(méi)裝。后來(lái)我猜可能就是這個(gè)導(dǎo)致的問(wèn)題沟绪。
按照常規(guī)方法安裝watchman之前需要
linux安裝watchman先要安裝依賴(lài)
sudo apt-get install autoconf automake python-dev
然后如官方的做法依次執(zhí)行
git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.7.0 # 這是facebook官方文檔說(shuō)的最新穩(wěn)定版本
./autogen.sh
./configure
make
sudo make install
剛安裝完watchman，運(yùn)行react-native start會(huì)報(bào)這樣到錯(cuò)誤
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的網(wǎng)站看了相關(guān)說(shuō)明以后知道是inotify-add-watch的問(wèn)題尊浪，但是不知道如何去增加這個(gè)限制。后來(lái)又去watchman的安裝說(shuō)明網(wǎng)站〖柙蓿看到如下說(shuō)明
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_watchesimpacts how many dirs you can watch across all watched roots.
那么怎么調(diào)整max_user-watches的值呢。查找以后肚吏，發(fā)現(xiàn)這是內(nèi)核的東西方妖，不好輕易改變，需要用下面到方法：
sudo su
vim /etc/sysctl.conf
在文件里面添加`**fs.inotify.max_user_watches=16384**`(這個(gè)是系統(tǒng)默認(rèn)值到兩倍罚攀，夠用了)党觅，:wq保存
然后運(yùn)行`/sbin/sysctl -p`使其立即生效
使用`sysclt -a`可以看到`fs.inotify.max_user_watches = 16384`
或者直接查看`/proc/sys/fs/inotify/max_user_watches`這個(gè)文件（切勿直接修改這個(gè)文件，因?yàn)榧词鼓阈薷牧水?dāng)時(shí)生效斋泄，等你重啟電腦杯瞻，這個(gè)值又會(huì)恢復(fù)默認(rèn)）。
好了炫掐，再運(yùn)行`react-native start`就OK了
#關(guān)于用真機(jī)調(diào)試
* 和你的瀏覽器端不在同一wifi環(huán)境魁莉，可以直接調(diào)試，linux需要手動(dòng)啟動(dòng)react packager：
>`react-native start`
這個(gè)命令你可以在工程編譯運(yùn)行之后執(zhí)行募胃。
另外旗唁，如果你中途有斷開(kāi)usb連接，那么需要執(zhí)行
>`adb reverse tcp:8081 tcp:8081`
* 和你的瀏覽器端在同一wifi環(huán)境下
此時(shí)需要你查找本機(jī)ip地址和端口痹束，然后搖晃手機(jī)检疫，在device settings里設(shè)置ip地址和端口。
另外参袱，有時(shí)候你會(huì)遇到這樣的問(wèn)題：
>{你的app 名字} has not been registered. This is other due to a require() error during initialization...
這可能是你的packager是另外一個(gè)工程的电谣，而且占用了8081的端口。解決辦法就是stop目前的packager抹蚀，然后在工程目錄下重啟packager：
```shell
react-native start
好了剿牺，先講這么多，后面遇到坑再補(bǔ)充
另外預(yù)告下环壤，筆者不久后會(huì)出react-native android插件開(kāi)發(fā)的文章晒来，敬請(qǐng)關(guān)注
