react native 初构建之我等到花儿都谢了

啰嗦几句

最近 react native 这货貌似很火，若是想让我从技术角度讲述她为何那么火，那我就不献丑了。不少喜欢刨根问底的程序猿，攻城狮比我说的明白多了。从个人角度来讲，我很喜欢 react native 的缘由是，她改变了前端这个称呼给你们的传统认知，她拓展了前端的维度。前端不光只能在 H5 的范畴里搞一搞，她也能够侵占到客户端里翻云覆雨。就像 nodejs 让前端能够在服务器端插一脚同样，提升前端的存在感，这是我所期盼和兴奋的。

新手上路

今天咱们不讨论任何深入的问题，做为一只小白，我只想把我第一次构建 react native 项目所踩的浅坑纪录一下。个人构建步骤是参照官方文档来的。建议你们安装以前也先读一读。

系统要求

1. 要求OS X系统：目前仅包含了iOS的实现（只有iOS的时代已通过去了，如今已经支持安卓了，只不过官方文档没有技术更新而已，因此彻底不要在乎这些细节）。

2. 安装Xcode：Xcode只在Mac上才能运行。开发者能够从Mac应用商店下载Xcode，但版本必定要在6.3以上。

3. 安装Node：Node或者npm的新手能够经过brew install node来安装Node.js。安装Node的方式有不少，这只是其中的一种。但必定要肯定node的版本在4.0以上。若是你早就已经安装过Node而且版本没有达到要求想要升级的话，别着急，后面我会给你提供一种我以为比较方便的升级步骤。

4. 安装watchman：Homebrew是官方推荐的安装watchman的套件管理工具，它的安装步骤能够参考Homebrew官网。官方推荐安装watchman，不然你可能会遇到node的文件监控bug。

5. 若是你想使用flow，能够经过brew install flow命令来安装flow。

更新Node

node有一个模块叫n（这名字也真够直接的），是专门用来管理node.js的版本的。
第一步，先安装n模块

npm install -g n

第二步，升级node.js到最新稳定版

n stable

若是你想升级node到最新版本可使用以下命令

n latest

很简单有木有？！若是你想升级node到指定版本，可使用n命令跟随版本号的方式。好比：

n v0.10.26

或者

n 0.10.26

快速上路

构建新项目

后面没有多少内容了，即便你是一个急性子，也但愿把后面的看完再着手作。
官方推荐的安装步骤是这样的，可是我以为这就是一个坑。固然你要确保你的node已经打到官方要求的4.0以上而且也安装了watchman。否则的话，安装的时候一直在转光标，根本停不下的状况，那就是本身把本身坑了。

npm install -g react-native-cli // 全局安装react-native
react-native init AwesomeProject // 建立项目名为AsesomeProject的新项目

当我执行完上述的两句命令时，我发现项目并无构建成功，而是卑鄙的给我提示了一坨错误。你妹的，出错了早说啊，害我等了那么久，键盘差点都吃了有木有？！

错误提示的大致意思是，只安装了全局react-native，而没有安装本地的。因此，我建议的安装步骤是这样的。

npm install -g react-native-cli // 全局安装react-native
npm install --save react-native
react-native init AwesomeProject // 建立项目名为AsesomeProject的新项目

若是由于权限报错请在命令前加sudo前缀。

在AwesomeProject/目录中执行以下操做：

运行新项目

1. 打开AwesomeProkect.xcodeproj，然在在Xcode中点击run运行；

2. 用文本编辑器打开index.ios.js，编辑一些代码；

3. 在iOS simulator中按cmd + R(twice)来重载APP，而且观察以前的改动。

使用淘宝npm镜像

在发布这篇文章以前，我在sf提问说关于建立RN项目速度慢到要吃键盘的程度是肿么回事的事情。有小伙伴的回答给我了启发。说若是换一个npm源可能会构建项目慢的杂症药到病除。那么就试试呗，一旦有奇效呢？

三种办法任意一种都能解决问题，建议使用第三种，将配置写死，下次用的时候配置还在。

1.经过config命令

npm config set registry https://registry.npm.taobao.org 
npm info underscore // 若是上面配置正确这个命令会有字符串response

2.命令行指定

npm --registry https://registry.npm.taobao.org info underscore

3.编辑~/.npmrc文件加入下面内容

registry = https://registry.npm.taobao.org

恭喜！您的第一个React Native应用就这么新鲜出炉了。ORZ...其实原本很简单的步骤却由于一些小插曲耽误了好多时间，不过最后的结果仍是美好哒！