【React Native 学习】mac 环境搭建

最近开始 RN 的学习，将过程记录为【React Native 学习】，方便自己之后查阅，其他初学 RN 的小伙伴也可以参考；

以下为 mac 系统 RN 开发环境搭建过程，比较简单

环境搭建

RN 开发必须要安装的依赖项：Node、Watchman、Xcode 和 CocoaPods

Node & Watchman

直接采用 homebrew 进行安装，mac 系统一般都自带 brew 的，如没有可自行百度安装；

// 安装 node
brew install node

// 安装 watchman
brew install watchman

安装 node 后，可将 npm 镜像改为淘宝源，以方便后续更新（或采用科学上网工具）

// npm 切换淘宝源
npx nrm use taobao

// 切换为官方源
npx nrm use npm

Xcode

Xcode 为 apple 提供的用于开发 mac OS及iOS系统软件的IDE，可直接在 App Store 进行下载即可；

Cocopods

Cocopods 是一种开源的包管理器，用于管理 iOS 开发中用到的第三方库或自行封装的库；可通过 brew 安装

// 安装 Cocopods
brew install cocopods

之前也曾写过通过gem安装、更新 cocopods，请查看：使用cocoa pods管理第三方框架

至此，已满足创建 react-native 工程的基础条件，可以打开【终端】进行简单尝试；

// 进入工程创建的目录
cd ~/Desktop

// 创建 HelloReactNative
npx react-native init HelloReactNative    

创建成功，目录如下：

HelloReactNative.png

上述为创建 RN 工程最基础的依赖环境，为更方便、更快捷的进行 RN 开发，还需要安装一些开发工具，如下：

yarn

Yarn 是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

// 安装 yarn
npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

react-native-cli

react-native-cli 是 Node.js 的一个插件，可用于命令行执行React Native命令和RN应用启动时检查服务端js文件是否更新,以及进行打包服务。

// 安装 react-native-cli
npm install -g react-native-cli

安装 react-native-cli 之后，可直接通过命令行执行 react-native 相关命令，如：

// 创建工程
react-native init HellReactNative          

WebStorm

WebStorm.png

像网页、iOS应用、Android应用等开发一样，采用 IDE 进行开发会更便捷，此处大多采用 JetBrains 的 WebStorm 进行 RN 开发，进行过 web、H5 开发的朋友应该对这款IDE比较熟悉，Android 开发应该也比较容易上手，和Android Studio 相似度极高（毕竟同一家的产品）；

---

小伙伴们，试试创建一个 React Native 工程吧......