前言

故事发生在2018年
杭州第一场雪飘落的时候
因工作需要被要求使用RN快速开发一套app
现记录搭建环境过程
Mac OS+IDE(XCode/Sublime)+Node(nvm)+RN(npm/yarn）
以备不时之需

环境

硬件环境：MacBook Pro 15.4
系统版本：macOS High Sierra 10.13.2

我们先来理一下准备工作
因为这是RN（GuoGongHeZuo）项目
所以需要前端的开发环境和iOS的开发环境

那我们分析一下需要的工具和联系
Mac系统就不多说了 受霸道苹果制裁，要不买台Mac要不装个黑苹果就好了
iOS环境的话也没什么好说的 Xcode From Appstore
唯一要说明的是检查下Xcode | Preferences | Locations菜单中是否已经安装Command Line Tools

如果没有的话，就在终端中输入以下命令：
xcode-select --install
都是~~汉子~~汉字,一路啪啪啪就ok了

React Native是在Javascript和React的基础上实现多平台开发，例如APP
那么本质上可以理解为通过FaceBook这个框架将js代码翻译成Java/OC实现Android/iOS
那么js的编译环境就需要Node(可以通过单独安装nvm实现)
如果没有装 可以在后续安装npm/yarn的时候一样安装

1. 安装Node+npm/yarn

1.1 先同步更新brew

//安装HomeBrew
curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install

//已安装的直接更新就好
brew update 

补充：
//常用命令 Orz
$ brew search git           // 搜索软件包
$ brew install git            // 安装软件包
$ brew unistall git          // 卸载软件包
$ brew list                 // 显示已经安装的所有软件包
$ brew update                // 同步远程最新更新，对已安装并有更新的软件用*标明
$ brew outdated            // 查看本机需要更新的软件包
$ brew upgrade             // 更新所有软件包
$ brew upgrade git        // 更新单个软件包
$ brew cleanup -n          // 查看可以清理的旧版本包
$ brew cleanup              // 清理所有包的旧版本的缓存
$ brew cleanup git          // 清理指定包的旧版本

1.2 安装包管理工具

这里要说明的是npm和yarn都是依赖包管理器，二者择其一就好，简单来说npm老牌一点用的多一点，yarn新一点有潜力一点，yarn基本上是兼容npm的命令的，所以耿耿更推荐后者

//通过Homebrew安装Yarn
brew upgrade yarn
//查看Yarn版本号，能查到代表安装成功
yarn --version

//使用 Homebrew 安装 Node  
brew install node

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

//使用 Homebrew 安装Flow
//Flow是一个静态的JS类型检查工具。
brew install flow

1.3 配置命令行工具

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

//查看当前下载源
yarn config get registry
//更换为淘宝源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

//同样道理，在国内需要进行以下额外配置。非国内，跳下一步。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
//查看更换后的下载源
npm config get registry

//安装RN工具（二者择其一）
npm install -g yarn react-native-cli
yarn global add react-native-cli

2.入门新建项目(RN命令行)

//切到RN 工程目录，就是iOS的上级目录
cd app

//初始化项目
react-native init RNTestProject

//进入RN项目内部（通常包括index.json/ios/android...）
cd RNTestProject

完成后可以直接跳到第4步

3.通过Yarn初始化项目(编译已有项目)

以下内容可以替代第2步骤

//初始化项目
yarn init -y
执行yarn init，会在根目录下生成一个package.json
- name : 项目名
- version : 版本号
- description : 项目描述
- entry point : 入口文件
- git repository： git项目链接地址
- author : 作者
- license : 协议

//安装webpack
yarn add webpack

//更新到最新的
yarn upgrade webpack

//安装项目里的全部依赖
yarn install  或者 yarn

以下为进阶内容

补充
//常用命令
//添加依赖包
yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]

yarn add [package] --dev
yarn add [package] --peer
yarn add [package] --optional

//升级依赖包
yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]
//移除依赖包
yarn remove [package]
//花式安装
yarn install --flat                         #第一次安装时指定版本到lockFile
yarn install --force                        #强制安装
yarn install --ignore-scripts               #不执行脚本
yarn install --no-lockfile                  #忽略lock文件
yarn install --silent                       #不要打印信息
yarn install --offline                     #不要同步更新库
yarn install --non-interactive             #禁用交互式提示，比如当一个依赖项的无效版本出现时

4.运行项目

无论是通过2新建的还是3初始化的，只有运行起来才是王道

//运行项目（手动去双击生成.xcodeproj文件一样效果）
react-native run-ios
//运行项目（第一次建议先用AS Open android文件夹，可以自动更新gradle）
react-native run-android

*修改代码的话从app.js开始就好了*