React Native的环境搭配

前提

系统：Ubuntu14.04LTS
1 Java：JDK8
Android Studio requires the Java Development Kit [JDK] 1.8 or higher. 需要1.8以上的jdk
2 Android Studio：2.0+ 需要2.0以上的AS
Android Studio will provide you the Android SDK and emulator required to run and test your React Native apps.
3 NodeJs：4.0+ 需要4.0以上的Node.js环境
所以开发React Native需要必须安装以下环境和工具：
1 Node.js
2 React Native Command Line Tools
3 Android Studio

---

# Node.js
Node.js环境提供了React Native开发过程中对项目的管理,我们需要经常和Node.js中的npm服务器打交道.
举例: 用npm start命令启动React Native的启动器；用npm install安装项目所依赖的第三方组件；用npm publish往npm上发布一些组件等.
下载并安装命令:
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs
注释:安装过程中出现如下错误# Your distribution, identified as “trusty”, is not currently supported, please contact NodeSource at https://github.com/nodesource/distributions/issues if you think this is incorrect or would like your distribution to be considered for support
解决办法：先执行 curl -sL https://deb.nodesource.com/setup | sudo -E bash
安装完成后，在终端，输入npm -v即可查所安装的node.js的版本

---

#React Native Command Line Tools
node.js安装成功之后，接下来我们就可以通过npm install来安装React Native命令行工具了.
执行命令:
npm install -g react-native-cli
注释:1 在搭建环境的过程中有些网站需要翻墙，所以建议你事先设置好代理，如何设置代理参见http://laod.cn/的设置 hosts;
在执行sudo npm install -g react-native-cli 前需要先安装 npm 参考 http://linmomo02.iteye.com/blog/1418346
2 npm install -g react-native-cli
npm http GET https://registry.npmjs.org/react-native-cli
npm ERR! Error: failed to fetch from registry: react-native-cli
执行： npm config set registry http://registry.npmjs.org/
npm install -g react-native-cli
React Native命令行工具安装成功之后，可以通过react-native –help来查了它索支持的所有命令

---

# 安装Android开发工具AndroidStudio
到Android开发者官网进行下载并安装即可：developer.android.com

---

#安装Watchman【可选】
sudo apt-get install automake
git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.5.0 # the latest stable release
./autogen.sh
./configure
make
sudo make install
注意：如果make提示缺少python.h，就需要安装python，
sudo apt-get install python-dev

---

#安装flow 【可选】
注意：本步骤官方文档里面没有提及，一定要先执行该步骤，不然flow-bin无法安装
从https://github.com/facebook/flow 下载源码
sudo apt-get install ocaml libelf-dev
make
安装ocam
http://opam.ocaml.org/doc/Install.html
opam install depext
opam depext –install flowtype

---

#安装flow-bin 【可选】
sudo npm config set registry http://registry.npmjs.org/
sudo npm config set strict-ssl false
sudo npm install -g flow-bin

---

#环境变量【必须】
export ANDROID_HOME=~/Android/Sdk
export ANDROID_NDK=~/Android/Ndk
export PATH=”~/Android/Sdk/tools:~/Android/Sdk/platform-tools:${PATH}”
注意：运行时会用到android sdk，环境变量必须要设置,ndk下载 http://wear.techbrood.com/tools/sdk/ndk/

---

#创建第一个React Native应用
执行命令:react-native init ReactProject
运行此命令之后，React Native会从npm上下载一些项目所依赖的包，并完成项目的初始化.
会自动生成一个demo工程，目录如下：
android
index.android.js 这是android的js入口文件
index.ios.js 这是ios的js入口文件
ios
node_modules
package.json
cd ReactProject
react-native run-android 运行该应用,会启动一个js服务 starting JS service,JS服务器是包管理服务器 也就是启动js服务器,类似于本地服务器可以向react应用提供js部分的资源

---

#修改npm镜像，提高项目初始化的速度
由于npm的服务是设在国外,所以 在初始化React Native应用或从npm上安装一些组件的时候通常的情况下是比较慢的，通过为npm设置一个国内镜像的方法，可以让npm每次下载组件的时候都从国内的镜像上获取,这样初始化应用时的速度有了很大改善。
Windows修改npm镜像的方法：
在Windows电脑上我们可以在.npmrc文件中设置npm的下载镜像地址，.npmrc文件通常在C:\Program Files\nodejs\node_modules\npm.npmrc路径下，打开此文件然后添加：registry = https://registry.npm.taobao.org,访问npm的时候就会被重定向到所设置的https://registry.npm.taobao.org镜像服务器.

---

#Nuclide：
Fackbook为了方便开发，在atom的基础上做了一个插件包Nuclide，用这个工具也可以编辑react native工程
安装Nuclide来编写代码：
https://nuclide.io/docs/editor/setup/#linux__prerequisites

---

#运行react-native/Examples
执行命令:
git clone https://github.com/facebook/react-native.git
./gradlew :Examples:Movies:android:app:installDebug
./packager/packager.sh 重新启动包管理器之后,在测试机器上就能看见安装的应用了
运行RN的应用的三种方式
第一种:react-native run-android
//如果要运行iOS项目则通过下面命令
react-native run-ios
第二种: AS
第三种:npm start命令来手动启动它
注释:
1如果出现 What went wrong:Execution failed for task ‘:ReactAndroid:downloadJSCHeaders’.
_> javax.net.ssl.SSLException: java.lang.RuntimeException: Could not generate DH keypair
需要修改jdk版本为java8，后面会有些java8的新特性
2当你遇到 ERROR Packager can’t listen on port 8081 这个问题时 执行
ps aux | grep react
Kill or pkill the process and then
react-native start 就可以了
3 react-native start如果发生报错
ERROR A non-recoverable condition has triggered. Watchman needs your
help!
The triggering condition was at timestamp=1475921672:
inotify-add-watch(/home/yangjian3/reactProject/AwesomeProject/node_modules/react-native/node_modules/babel-preset-fbjs/node_modules/babel-plugin-transform-es2015-shorthand-properties)
-> 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
解决办法
$sudo sysctl fs.inotify.max_user_watches=524288$ sudo sysctl -p
$ watchman shutdown-server

---