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