1.安装工具
2.homebrew安装
3.安装watchman和flow
$ xcode-select --install
$ brew install watchman flow gcc pkg-config cairo libpng jpeg mongodb
$ nvm alias default v4.2.3
$ sudo npm install cnpm -g
2.安装node,npm
安装方式一:
$ brew intsall nvm
$ nvm install --lts 安装稳定版node
用brew安装nvm后需要手动去配置环境变量
You should create NVM's working directory if it doesn't exist:
$ mkdir ~/.nvm
Add the following to ~/.bash_profile or your desired shell configuration file:
$ vim .bash_profile
在里面添加下面两句
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
按ESC输入:wq退出
$ source .bash_profile
安装方式二:
打开github官网https://github.com/ ,输入nvm搜索,选择creationix/nvm,找到Install script,复制终端输入
sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
这时就会自动下载,下载完后会自动Appending source string to /Users/luosa/.bash_profile
关闭重启终端,To verify that nvm has been installed, do:command -v nvm
3.安装WatchMan
WatchMan是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。
sudo brew install watchman
4.安装Flow
flow是一个 JavaScript 的静态类型检查器。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。
sudo brew install flow
5.React Native安装,只要全局安装一次
Yarn、React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
$ sudo npm install -g yarn react-native-cli
6.安装Genymotion
Genymotion是一个第三方模拟器,它比Google官方的模拟器更易设置且性能更好。但是,它只针对个人用户免费。
下载并安装Genymotion https://www.genymotion.com/
打开Genymotion,如果你尚未安装VirtualBox,它有可能会提示你安装
创建一个模拟器并启动
按下⌘+M可以打开开发者菜单(在安装并启动了React Native应用之后)
7.WebStom设置React Native代码提示
从gitHub上下载xml插件 https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
将ReactNative.xml复制到 ~/Library/Preferences/WebStorm16/templates ,然后重启 WebStrom。
React Native的第一个应用
执行命令,生成一个工程
提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目。例如
react-native init MyApp --version 0.44.3
注意版本号必须精确到两个小数点。
注意:由于众所周知的网络原因,需要等待一段时间(具体视网络情况而定)。react-native命令行从npm官方源拖代码时会遇上麻烦,可以将npm仓库源替换为国内镜像:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist