React Native学习01 - 在Mac平台上搭建iOS开发环境

最近React Native技术比较火，React Native是Facebook发布的一个开源框架（Github地址），据我所知携程的APP就是使用React Native开发，且携程的技术团队还专门出了一本关于React Native的书

确实React Native相比于HTML5性能更好，相比于原生iOS更灵活。

本人从React Native官网开始零基础学习React Native，并时时记录自己的学习成果及心得，并分享给大家。

Let’s get started!

下面我们从基本的基本开始入手，在Mac平台上搭建iOS开发环境（关于其他平台的大家可以去官网看）

一、在Mac平台上搭建iOS-React Native开发环境

1.安装HomeBrew

Homebrew,我们可以把它理解为终端上的AppStore，我们可以通过在终端敲一些命令就可以安装应用，且速度相对于AppStore要快
关于Homebrew的配置可以看少数派的一篇文章
《借助 Homebrew Cask，教你快速下载安装 Mac App 新姿势》

2.安装Node.js

(1)我们可以使用homebrew来安装Node.js
在终端下直接敲入以下命令

$brew install node

(2)我们也可以直接去官网下载Node.js点击安装
官网地址：https://nodejs.org/en/
下载时最好下载最新版本

3.React Native的命令行工具（react-native-cli）

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

$npm install -g react-native-cli

按官网的意思
如果你看到EACCES: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权：(我是没有遇到过)

$sudo chown -R `whoami` /usr/local

---

到了这里，基本的环境已经算搭建完成了，我们可以开始编写我们的第一个ReactNative项目
下面4-6是推荐的工具，可以帮助我们更好的开发，你可以跟着步骤操作，也可以直接跳过，从7开始

---

推荐安装的工具

4.Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

$brew install watchman

5.Flow

Flow是一个静态的JS类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。

$brew install flow

6.Nuclide

Nuclide（此链接需要科学上网）是由Facebook提供的基于atom的集成开发环境，可用于编写、运行和调试React Native应用。

点击这里阅读Nuclide的入门文档。

译注：我们更推荐使用WebStorm或Sublime Text来编写React Native应用。

本人也比较偏好Sublime Text工具

7.测试安装

$react-native init AwesomeProject
$cd AwesomeProject
$react-native run-ios

8.修改项目

现在我们已经成功运行了项目，我们可以开始尝试动手改一改了：

用Sublime Text打开index.ios.js并随便改上几行。
在iOS Simulator中按下⌘-R就可以刷新APP并看到你的最新修改！

9.以上过程中可能遇到的问题

（1）如果你遇到类似于以下的问题

Warning: You are using OS X 10.12.
We do not provide support for this pre-release version.
You may encounter build failures or other breakages.
Please create pull-requests instead of filing issues.

我猜你肯定是和我一样，安装了最新版的macOS Sierra Beta版系统，后来我是在我的另外一台OS X EI Capitan电脑上配置成功。大家如果手头只有一台电脑，可以参考以下教程，进行系统降级
《macOS Sierra 公测版升级和降级教程》

（2）如果大家在用终端安装Node.js时，下载一直到不了100%，建议大家去官网直接下载安装包安装

---

Study React Native With Me!