Mac 环境搭建 React Native

配置mac开发环境
(刚开始学习RN,随记一下环境搭建)

1. 基本环境安装

先安装Homebrew:用于安装NodeJS和其他工具。

image.png

注: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 中创建符号链接。

Snip20180606_4.png

*中途会要求你输入本机密码
然后一路回车!

Snip20180606_6.png

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

2. 安装 Node.js

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

*brew install node

Snip20180606_7.png

到此环境就配置好了!
但是,转折...
由于npm 是Nodejs平台的一个包管理工具,它将模块放在一个nodejs可以找到的地方,并且能够机智的管理依赖中间的冲突。它极其的具备可配置性,支持广泛的应用情况,通常它被用来 发布,发现,安装和开发node程序,命令行工具可以轻松创建和初始化工程。

3.安装React Native 命令行工具npm

命令行工具可以轻松创建和初始化工程:
*npm install -g react-native-cli

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

4.建议安装

Yarn

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
*npm install -g yarn react-native-cli

Watchman

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

Flow

静态类型检查工具
*brew install flow

Nuclide

Facebook推出的一款React Native集成开发环境(IDE),不过个人不太喜欢。

5. 快速开发React Native

学习一门新的语言,我们总是总喜欢来一个HelloWord。
*react-native init HelloWord
(此步会从npm服务器下载我们项目所需要的包,npm服务器是架在国外的,所以国内访问速度可能不是很好,想提高访问速度的话可以使用下面的淘宝镜像替换。)
*cd HelloWord
*react-native run-ios(或者直接打开xcode.project)

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

要学习的太多了, 活到老,学到老!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容