到如今React Native已经进化了很多版本,开发环境的配置也发生了一些改变,本文仅供参考,请按照官方指引配置,防止某些细节出入导致配置失败。官方英文版配置说明
React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下。
中文版配置说明:这个版本来自极客学院的翻译版,不过和官方的版本相比略有滞后,不过照着安装也问题不大。
官方英文版配置说明:英文没问题的可以直接看这个版本。
首先说明下,目前RN开发只能在OSX平台下进行,也就是只有iOS版本的开发组件,预计10月份发布支持Android的版本。
环境需求:
1.Xcode 6.3以上版本
2.需要安装Homebrew,这货又叫brew,是在OSX平台上的软件包管理工具,可以理解为类似Linux平台下(如Ubuntu)的apt-get、(CentOS下的)yum等功能,在配置RN环境中,Homebrew用来安装RN开发所需的三个软件包(io.js, watchman, flow)
2.1.Homebrew官方网站(简体中文版)
2.2.安装,按照官网的命令行在命令终端输入:ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
即可
2.3.扩展阅读:
-Homebrew的安装与使用
-使用brew安装软件
3.安装io.js
3.1.在之前RN开发配置中,使用的并不是io.js,而是node.js,简单来说,io.js是后者的一个分支,按照RN的配置手册中的描述,这是个更加摩登的node.js
3.2.安装io.js有两种方式(之一)
3.2.1.使用nvm方式安装,好吧,这里又跑出来个nvm,这个可以理解为是个io.js以及node.js的版本管理工具(因为这两货升级太快了,跟不上节奏啊,摔),可以使用nvm来安装io.js、node.js,同时也能用来切换以及升级它们的版本
3.2.2.既然nvm也是个第三方软件工具包,那么也可以用前面提到的Homebrew安装
3.2.3.直接在命令终端输入:brew install nvm
一阵代码翻滚后就好了,当然可能会提示你设置环境变量什么的,照着复制粘贴命令就可
3.2.4.安装好了nvm,该安装io.js了,直接输入:nvm install iojs && nvm alias default iojs
3.2.5.扩展阅读:
-Node.js 安裝與版本切換教學 (for MAC)
-利用n和nvm管理Node的版本
3.3.安装io.js有两种方式(之二)
3.3.1.直接使用Homebrew安装,输入命令:brew install iojs && brew link iojs --force
3.3.2.值得注意的是,如果在安装io.js之前你的环境已经安装了node.js,那么需要执行:brew unlink node
命令来解除相关引用
3.3.扩展阅读:
-Node.js也分裂,核心开发者创建分支io.js
4.安装watchman
4.1.直接输入命令:brew install watchman
静看代码翻滚
5.安装flow
5.1.直接输入命令:brew install flow
静看代码翻滚
6.中间小结,其实到这里,RN的开发环境所需的东西都已经安装完了,是不是觉得少了点什么。嗯,你的直觉是对的,天朝程序猿都被虐惯了,太顺利反而不正常啊,啊哈哈哈哈哈(带着泪。。。),想要跑起RN的Demo来,还得干点什么,那就继续看吧。
7.快速开始之安装React Native命令行工具
7.1.在手册中,(理论上)只需要输入给出的那行命令(先别着急输入!):npm install -g react-native-cli
(不一定)就行了
7.2.都说了哪有那么简单嘛!npm是什么?先解释下,Node Package Manager(node包管理器),前面说了io.js与node.js,这两货可以理解为(同源,一个爹生的)运行js的平台,相应的也有很多第三方js功能包,react-native-cli命令工具就是其中的一个,安装他们就需要npm了
7.3.但是,这些功能包的源服务器一般都是在国外,有时候说不定就被GFW给认证了,所以你运行上面那行命令也是白给啊
7.4.好在有国内的好心人做了(淘宝NPM)镜像,10分钟同步一次,这样就无痛安装了(废话好多啊)
7.5.所以得做点设置,原理就是定义一个新的npm命令(引用、或者叫别名),比如cnpm,将这个命令指向的源服务器指向国内镜像即可,在命令终端输入:npm install -g cnpm --registry=https://registry.npm.taobao.org
7.6.所以开始说的那行命令改为:cnpm install -g react-native-cli
输入即可
7.7.扩展阅读:
-国内优秀npm镜像推荐及使用
-淘宝 NPM 镜像
-React Native第一课
8.总结,终于差不多要结束了,盘点下我们都干了点啥
8.1.安装了一个OSX系统下的第三方软件工具包管理工具:Homebrew
8.2.然后使用Homebrew安装了4个第三方软件工具包(nvm, io.js, watchman, flow),后三个是RN开发所需要的软件包
8.3.在开始RN开发前需要配置一个RN命令行,为了配置安装这个命令,对io.js的npm命令进行了修改
完毕