React-Native 环境篇

备注：此篇文章主要是在mac下的安装 Android篇

工欲善其事，必先利其器

React-Native 准备配置

1 安装brew

brew -v 如果存在就不需要安装了，否则

ruby -e "$(curl -fsSL --insecure https://raw.githubusercontent.com/Homebrew/install/master/install)"

2安装node.js

brew install node，官网http://nodejs.cn/

安装好node 就可以使用npm命令了， npm 是node.js的依赖包管理工具,很多js库都托管在上面

3安装watchman

watchman是一个Facebook制作的工具，用来监测文件系统的变更。安装这一工具可以提高性能，并避免node中的一个监视文件的bug。

brew install watchman

4安装 flow

Flow是一个 JavaScript 的静态类型检查器，建议安装它，以方便找出代码中可能存在的类型错误：

brew install flow

以上步骤均完成以后 下面我们就要开始配置IOS和Android的开发环境了，这里略过，参考http://reactnative.cn/docs/0.24/android-setup.html

安装 React Native

npm install -g react-native-cli （react-native-cli react-native命令行工具）

Nuclide IDE 的安装和配置（可选）

ATOM:https://atom.io/+ Nuclide

下载后安装，打开Atom->Preferences..->Install,搜索nuclide,点击install就可以安装Nuclide了

但是这种方式非常慢，建议采用下面的方式

cd ~

git clonehttps://github.com/facebook/nuclide.git

cd nuclide

./scripts/dev/setup  执行编译安装，安装完成后会软链到~/.atom/packages目录下，如果没有，请自行软链

ln -sf ~/nuclide ~/.atom/packages/

以上完成后，请打开atom，打开你的react-native项目

插件推荐:

save-session：让 Atom 记住上一次打开的会话；

atomerinal

第一个小程序：AwesomeProject

执行如下命令生成一个工程：

react-native init AwesomeProject

cd AwesomeProject/android  修改里面android gradle的配置以便符合本地gradle和sdk的配置，否则要重新下载，耗时较长

运行

$react-native run-android

此时在手机上运行出来是一片空白，由于项目安装到手机后没有给显示悬浮窗的权限，在手机设置里给app添加上这个权限就OK了。

再次运行屏幕一片红，下方出现了“Reload JS”的按钮， 显示异常 ReferenceError:Can't find variable:_fbBatchedBridge，

这个时候摇晃手机（genimotion command+M） 在出来的菜单里选择“Dev Settings”，然后点击最下面的“Debug server host & port for device“，然后填入你电脑的ip:8081

必须是你的手机和你的电脑在同一个局域网内才可以。设置完成以后再重启应用 就可以看到第一个react native项目了