React Native Mac系统下环境搭建
安装
Homebrew
Homebrew 是Mac系统的安装包管理工具,可以用它来安装和管理其他的工具包。
安装方式,在终端输入下面这段指令点击回车:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装完Homebrew之后,使用Homebrew来安装其他所需的工具。
Node
使用Homebrew安装Node.js。注:React Native目前需要NodeJS 5.0或更高版本。
$ brew install node
安装完成之后可以在终端输入node -v
来查看当前安装的node版本。由于新版的Nodejs已经集成了npm,所以npm也会一并自动安装完成,使用npm -v
查看当前npm的版本。
npm(node package manager)是node的包管理工具,顾名思义,它的主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。
React Native的命令行工具(react-native-cli)
使用npm来安装 react-native-cli:
$ npm install -g react-native-cli
安装成功之后会输出:
/usr/local/bin/react-native -> /usr/local/lib/node_modules/react-native-cli/index.js
+react-native-cli@2.0.1
added 41 packages in 9.535s
Xcode
React Native目前需要Xcode 8.0 或更高版本。可以通过App Store或者直接到Apple开发者官网上下载。安装完Xcode之后同时会安装Xcode的命令行工具。
开发工具Atom
开发工具可以选择Atom或WebStorm或Sublime Text或Visual Studio Code来编写React Native应用,我这里用的Atom开发工具。去Atom官网下载安装包直接安装就行了。
Nuclide
Nuclide(此链接需要科学上网)是由Facebook提供的基于atom的集成开发环境,可用于编写、运行和 调试React Native应用。
安装方式:
1)打开 Atom,点击顶部菜单栏"Atom"->"Preferences",会跳转到"Settings"页面。
2)点击"install",在输入框输入nuclide
,点击"Packages"。
安装完nuclide
之后,导航栏会多出一个"Nuclide"选项。
3)点击菜单栏"Atom"->"Preferences",进入"Settings"页面。点击"Packages",在输入框中输入nuclide
,点击nuclide
的"Settings"按钮。
往下翻,勾选"Install Recommended Packages On Startup"
nuclide_install04.png
4)关闭Atom再打开,就会自动开始下载Atom一些相关的插件。
nuclide_install05.png
下载完成之后,Atom就会多出一个工具栏。
nuclide_install06.png
Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。React Native官方推荐安装该工具。
安装:
$ brew install watchman
Flow
Flow是一个静态的JS类型检查工具,注:比如在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。
安装:
$ brew install flow
安装完成之后,在终端中输入"which flow",查询出flow的路径,将其配置到Atom中。
flow_install01.png
在"Setting"页面搜索到nuclide
插件,点击"Setting",找到"Nuclide-flow"这一项并单击。
找到"Path to Flow Executable",在输入框中输入flow的包路径。
flow_install03.png
最后:测试安装
创建一个React Native项目,该过程可能会有点慢,耐心等待就好。
$ react-native init <项目名称>
创建完成之后,进入到该项目根目录,运行项目。
$ cd <项目名称>
$ react-native run-ios
运行成功之后,会自动打开Xcode模拟器,就可以看到运行的效果了。