备注:此篇文章主要是在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项目了