概述

前面我们介绍过在window环境下开发React Native项目，今天说说怎么在mac上搭建一个RN的开发环境。

配置mac开发环境

基本环境安装

1.先安装​​Homebrew​​：用于安装NodeJS和其他工具。 

Mac上搭建React Native开发环境_ruby


注：Homebrew详解，对这个比较了解的略过，我也是用mac没多久，这里给小白普及下。 

Homebrew全称Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn’t include with OS X。是一个包管理器，用于在Mac上安装一些OS X没有的UNIX工具（比如著名的wget），Homebrew将这些工具统统安装到了 /usr/local/Cellar 目录中，并在 /usr/local/bin 中创建符号链接。 

安装Homebrew:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • 1

Mac上搭建React Native开发环境_ide_02


然后一路回车 

Mac上搭建React Native开发环境_ruby_03

 

最后出现success，就表示安装成功了。 

Mac上搭建React Native开发环境_ruby_04


安装完成后，可以用brew doctor命令检测下是否有什么冲突的地方。关于Homebrew其他的介绍可以自行查看官网资料。

安装 Node.js

React Native 需要 NodeJS 4.0或更高版本，Homebrew的Node默认包是6.0版本的，所以直接安装即可：

install
  • 1

Mac上搭建React Native开发环境_移动开发_05

安装React Native 命令行工具npm

之前我们说过npm是一个包管理工具，它是用来管理node的，详细介绍请看​​npm详解​​​ 
命令行工具可以轻松创建和初始化工程：

npm install -g react-native-cli
  • 1

注：如果出现错误 :EACCES: permission denied,使用命令: sudo npm install -g React-native-cli.

安装Yarn

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli
  • 1

其他建议安装

Watchman

​​Whtchman​​是Facebook开发的一个检测文件系统变化的工具，在RN开发中可以检测js文件等是否有变化，从而达到保存及编译的效果。这个在windows中也有，个人觉得可装也可以不装，直接手机上reload也是可以的。

install

Flow

静态类型检查工具

brew install

Nuclide

Facebook推出的一款React Native集成开发环境(IDE)，不过我不太喜欢，我一般用webstorm+Android/ios 的ide。

快速开发React Native

每次学习一门新的语言，我们总是总喜欢来一个helloWord。

react-native init HelloWord

cd HelloWord 

react-native run-ios

注：也可以用Xcode打开iOS/HelloWord.xcodeproj 并点击Run按钮。 
小提示：react-native命令行从npm官方源拖代码时会遇上麻烦。请将 npm仓库源替换成淘宝的：

set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

关于在mac上怎么搭建Android的运行环境这里不在讲解，大家可以看看我之前的文章​​React 和Android的整合​​，这篇文章也是补了之前RN在windows环境下开发，而没有在mac下开发，后面我们将讲解怎么在mac上开发一款RN应用。