Ubuntu 16.04 下 React Native環境搭建

轉載請註明出處：http://www.wangxinarhat.com/2016/05/21/2016-05-21-react-native1/
摸索React Native有一段時間了，嘗試在Windows下和linux下搭建開發環境，踩過的坑仍是會忘，在此記錄

安裝

• nodejs

sudo apt-get install -y build-essential
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo ln -s /usr/bin/nodejs /usr/bin/node

• React Native命令工具

npm install -g react-native-cli

• Watchman
  Watchman是由Facebook提供的監視文件系統變動的工具。安裝此工具能夠提升開發時的性能（packager能夠快速捕捉文件的變化從而實現實時刷新）

git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.5.0
./autogen.sh
./configure
make
sudo make install

• Flow
  Flow是一個靜態的JS類型檢查工具，這一語法並不屬於ES標準，只是Facebook自家的代碼規範。

npm install -g flow-bin

配置

將ANDROID_HOME環境變量指向Android SDK的路徑,ANDROID_NDK指向NDK目錄

具體的作法是把下面的命令加入到~/.bashrc、~/.bash_profile文件中

export ANDROID_HOME=~/Android/Sdk
export ANDROID_NDK=~/Android/android-ndk-r10e

使用下列命令使其當即生效（不然重啓後才生效）：
source ./bash_profile

Hello React

初始化一個React Native的Hello World項目並運行

react-native init HelloReact
cd HelloReact
react-native run-android

正常的話這是該有一個這樣的界面

修改下index.android.js文件，手機端reload js，體驗React Native

坑

• 運行react-native run-android後手機出現Could not connect to development server

以下圖：

查看github找到一個issue，解決方法是：
A common issue is that the packager is not started automatically when you run react-native run-android. You can start it manually using:

就是說運行react-native run-android，Packger可能不會自動運行，需手動啓動它
react-native start

• watchman issue : Poison: inotify_add_watch
  出現如下錯誤

ERROR  A non-recoverable condition has triggered.  Watchman needs your help!
The triggering condition was at timestamp=1466189741: inotify-add-watch(/home/wangxinarhat/ReactProjects/HelloReact/node_modules/react-native/node_modules/fbjs-scripts/node_modules/babel/node_modules/chokidar/node_modules/anymatch/node_modules/micromatch/node_modules/braces/node_modules) -> 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

{"watchmanResponse":{"version":"4.1.0","error":"A non-recoverable condition has triggered.  Watchman needs your help!\nThe triggering condition was at timestamp=1466189741: inotify-add-watch(/home/wangxinarhat/ReactProjects/HelloReact/node_modules/react-native/node_modules/fbjs-scripts/node_modules/babel/node_modules/chokidar/node_modules/anymatch/node_modules/micromatch/node_modules/braces/node_modules) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl\nAll requests will continue to fail with this message until you resolve\nthe underlying problem.  You will find more information on fixing this at\nhttps://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch\n"}}
Error: A non-recoverable condition has triggered.  Watchman needs your help!
The triggering condition was at timestamp=1466189741: inotify-add-watch(/home/wangxinarhat/ReactProjects/HelloReact/node_modules/react-native/node_modules/fbjs-scripts/node_modules/babel/node_modules/chokidar/node_modules/anymatch/node_modules/micromatch/node_modules/braces/node_modules) -> 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

    at ChildProcess.<anonymous> (/home/wangxinarhat/ReactProjects/HelloReact/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:206:21)
    at emitTwo (events.js:87:13)
    at ChildProcess.emit (events.js:172:7)
    at maybeClose (internal/child_process.js:827:16)
    at Socket.<anonymous> (internal/child_process.js:319:11)
    at emitOne (events.js:77:13)
    at Socket.emit (events.js:169:7)
    at Pipe._onclose (net.js:477:12)

由於inotify默認內核參數值過小，修改之：

echo 256 | sudo tee -a /proc/sys/fs/inotify/max_user_instances
echo 32768 | sudo tee -a /proc/sys/fs/inotify/max_queued_events
echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches
watchman shutdown-server