前言
故事发生在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开始就好了*