React Native Mac系统下环境搭建

2017-12-13  本文已影响0人  醜捌怪

安装

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"页面。

setting.png

2)点击"install",在输入框输入nuclide,点击"Packages"。

nuclide_install01.png

安装完nuclide之后,导航栏会多出一个"Nuclide"选项。

nuclide_install02.png

3)点击菜单栏"Atom"->"Preferences",进入"Settings"页面。点击"Packages",在输入框中输入nuclide,点击nuclide的"Settings"按钮。

nuclide_install03.png

往下翻,勾选"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"这一项并单击。

flow_install02.png

找到"Path to Flow Executable",在输入框中输入flow的包路径。


flow_install03.png

最后:测试安装

创建一个React Native项目,该过程可能会有点慢,耐心等待就好。

$ react-native init <项目名称>

创建完成之后,进入到该项目根目录,运行项目。

$ cd <项目名称>

$ react-native run-ios

运行成功之后,会自动打开Xcode模拟器,就可以看到运行的效果了。

上一篇下一篇

猜你喜欢

热点阅读