React Native开发环境配置(转)

转自:http://www.jianshu.com/p/cd2a8c5ee1c7

到如今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命令进行了修改

完毕

文/显卡84du(简书作者)
原文链接:http://www.jianshu.com/p/cd2a8c5ee1c7
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

时间: 2024-12-15 01:32:52

React Native开发环境配置(转)的相关文章

Mac上react native 开发环境配置

参考链接: http://facebook.github.io/react-native/docs/getting-started.html#content Ios 开发比较简单,Xcode7.0之后都支持. Android开发,需要安装SDK等 参考http://facebook.github.io/react-native/docs/android-setup.html Mac:第一步Andorid开发环境 1)  brew install android-sdk  2)配置ANDROID_

Mac配置React Native开发环境

一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提高自己的iOS代码专业能力,掌握Swift3.0,顺便学习学习React Native. 学习一门语言当然少不了硬件和软件设备啦,不然怎么学习...嘿嘿,对吧!!!! 下面记录下自己配置React Native开发环境: 1> 安装brew: 打开终端,输入:   /usr/bin/ruby -e

React Native 开发环境安装和配置使用报错: -bash: react-native: command not found

[React  Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watchman,flow都成功.React  Native 开发环境安装和配置 执行react-native init TestProject 命令 创建demo时报错:-bash: react-native: command not found 报错提示:Please include the follo

React Native开发 - 搭建React Native开发环境

移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的.然而现在有蛮多的公司开发App是基于React Native来开发的,这样可以做到一个App,就是一套代码,一个团队.对于公司来说,无疑节约了成本. <React Native开发>这系列的文章主要是记录本人利用React Native学习开发的笔记,这一篇文章是第一篇<搭建React Na

搭建React Native开发环境遇到的几个问题

根据http://blog.csdn.net/itpinpai/article/details/50809068这篇文章初步搭建React Native 开发环境, 遇到几个问题 首先端口可能被占用了, 访问8081时提示无法访问 解决方法: 在运行react-native start时添加参数--port 8899, 或者在package.json中修改"scripts"中参数, 添加端口号, 或者修改项目下的node_modules\react-native\local-cli\s

在Mac上搭建React Native开发环境

概述 前面我们介绍过在window环境下开发React Native项目,今天说说怎么在mac上搭建一个RN的开发环境. 配置mac开发环境 基本环境安装 1.先安装Homebrew:用于安装NodeJS和其他工具. 注:Homebrew详解,对这个比较了解的略过,我也是用mac没多久,这里给小白普及下. Homebrew全称Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn't i

搭建基于Windows的React Native 开发环境(For Android)

React Native号称能跨平台开发IOS和Android的原生应用,想来必定会成为一种趋势.刚好计划开发一款手机APP,又没有相应的开发资源,决定自己摸索着试试. 第一步是搭建开发环境,以下是官方文档.网上资料,结合本人实际操作的总结: 一.       准备工作 (1)安装安卓SDK 根据React Native官网的指示(http://facebook.github.io/react-native/docs/android-setup.html#content),首先需要安装Andro

Mac下搭建react native开发环境

安装必需软件 Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题.可以使用下面的命令修复: sudo chown -R `whoami` /usr/loca

搭建React Native开发环境

原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/setup-react-native-development-environment/ 安装Xcode 从App Store搜索下载.需要Apple Id账号. 安装Homebrew 打开Terminal,执行以下命令即可安装.详情请参考Homebrew官网(http://brew.sh/). install Homebrew # no need VPN /usr/bin