TL.DR
Homebrew -> watchman
nvm -> Node.js -> npm -> react-native-cli -> react-native
Heads up
JS的世界是疯狂的。
在这种时候,不论是前端老司机,还是刚刚接触JS的跨界开发者,都需要一根安全带——
nvm
Node Version Manager,支持安装多个Node版本并可自由切换,居家旅行必备。
安装过程有点曲折。尽管Homebrew中可以搜到nvm的formula,但官方并不支持通过它安装,look
Homebrew installation is not supported. If you have issues with homebrew-installed nvm, please brew uninstall it, and install it using the instructions below, before filing an issue.
最简单的安装方式是
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash
#or
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash
注意链接中包含了nvm的版本号,当你读到这里时很可能nvm已经有了更新的版本,你可以从官方repo的README中获取最新的链接。
如果你用zsh的话,那么zsh-nvm会是更好的选择。
Node.js && npm
通过nvm安装最新的Node.js LTS版本
nvm install --lts
#安装成功后查看node版本
node -v
v6.11.3
设置npm指向淘宝镜像,原因你懂的
echo 'registry https://registry.npm.taobao.org' > ~/.npmrc
Node自带的npm往往不是最新的,更新先
npm install -g npm@latest
react-native-cli
react-native-cli是一个npm package
npm install -g react-native-cli
它的核心作用是生成React Native工程。
react-native init hello_react_native
以及启动app
cd hello_react_native
#这个command只做2件事,在app这一边
#1. 调用xcodebuild编译iOS工程,把生成的.app安装到Simulator里
#2. 启动Simulator
#3. 启动app
#在Node.js这边
#1. 启动React Native Packager
react-native run-ios
watchman
上文提到的React Native Packager,会利用watchman监听工程目录下js文件的变化,并通知运行中的app,以实现Hot Reload。
brew install watchman
如果安装后Homebrew提示postinstall failed,很可能是因为/usr/local目录的权限不对,需要
sudo chown -R whoami /usr/local
运行
react-native run-ios
一切顺利的话,Simulator里应该已经跑起了模板app
Optional:Visual Studio Code
facebook推荐使用nuclide,但在开发工具上,我选择做一只软🐶。React Native Tools 是微软专门为React Native提供的VSC扩展,稳定可靠。