筆者接觸react native一個(gè)星期，可以說是趟坑無數(shù)，憤懣不已，所以煉制這篇文章希望后來者能夠少走彎路。
我一開始是在windows上面成功搭建這個(gè)開發(fā)環(huán)境，因?yàn)楣P者不喜歡windows蹩腳到命令行，所以還是裝了ubuntu系統(tǒng)，繼續(xù)追求我高效率的開發(fā)體驗(yàn)。

首先看官可以移步這個(gè)官方文檔。按照這個(gè)文檔一步步執(zhí)行就行了，筆者后面主要獻(xiàn)上這個(gè)文檔到疏漏和防坑36計(jì)。

Java和android環(huán)境變量一定要精確配置好

這個(gè)是做安卓開發(fā)到基礎(chǔ)，很多次了，話休煩絮，直接獻(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)于Android SDK的一些要求

• 官方說一定要裝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。
  之所以官方說要23.0.1是因?yàn)槌跏蓟こ痰臅r(shí)候默認(rèn)配置是這個(gè)。
• minSdkVersion 16，在build.gradle中一定注意這個(gè)，16是facebook支持到最小api，切記切記！筆者到工程又一次因?yàn)槭?5，半天沒查處原因。

關(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àng)目工程下gradle/wrapper/gradle-wrapper.properties這個(gè)文件，查看distributionUrl這個(gè)值是那個(gè)gradle的版本，然后去這個(gè)鏈接，把相應(yīng)到版本下載到本地，比如說home/phoobobo/gradle/gradle-2.4-all.zip這個(gè)路徑，那么你修改distributionUrl這個(gè)值distributionUrl=file:///home/phoobobo/gradle/gradle-2.4-all.zip。
  執(zhí)行完上述操作再通過終端命令react-native run-android運(yùn)行工程或者在android studio直接運(yùn)行工程，會(huì)很快。

必須安裝watchman！

必須安裝watchman！必須安裝watchman！必須安裝watchman！重要的事情說三遍！我就因?yàn)闆]有安裝watchman后面浪費(fèi)到時(shí)間不計(jì)其數(shù)，雖然臨時(shí)用其他辦法解決了，但是最終卡在這里過不去了。
如果不裝，經(jīng)常會(huì)出現(xià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)
.......

有沒有發(fā)現(xiàn)里面好多“watch”？開始我是通過刪除build目錄，重新build工程，問題有很多次得到解決，后面就再也不行了。然后我想起官方文檔里有推薦安裝watchman，說可以解決文件監(jiān)控到某些bug。第一次裝到時(shí)候執(zhí)行./autogen.sh 不成功，然后覺得這個(gè)東西是可選項(xiàng)，所以就沒裝。后來我猜可能就是這個(gè)導(dǎo)致的問題。

按照常規(guī)方法安裝watchman之前需要

linux安裝watchman先要安裝依賴

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官方文檔說的最新穩(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)說明以后知道是inotify-add-watch的問題，但是不知道如何去增加這個(gè)限制。后來又去watchman的安裝說明網(wǎng)站。看到如下說明

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.

那么怎么調(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í)行。
另外，如果你中途有斷開usb連接，那么需要執(zhí)行
>`adb reverse tcp:8081 tcp:8081`

* 和你的瀏覽器端在同一wifi環(huán)境下
此時(shí)需要你查找本機(jī)ip地址和端口，然后搖晃手機(jī)，在device settings里設(shè)置ip地址和端口。

另外，有時(shí)候你會(huì)遇到這樣的問題：
>{你的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插件開發(fā)的文章，敬請(qǐng)關(guān)注