Ubuntu React Native環境搭建

筆者接觸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 registryhttps://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：

react-native start

好了，先講這麼多，後面遇到坑再補充