react native 初构建之我等到花儿都谢了 - 快车库

啰嗦几句

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

新手上路

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

系统要求

要求OS X系统：目前仅包含了iOS的实现（只有iOS的时代已经过去了，现在已经支持安卓了，只不过官方文档没有技术更新而已，所以完全不要在意这些细节）。
安装Xcode：Xcode只在Mac上才能运行。开发者可以从Mac应用商店下载Xcode，但版本一定要在6.3以上。
安装Node：Node或者npm的新手可以通过brew install node来安装Node.js。安装Node的方式有很多，这只是其中的一种。但一定要确定node的版本在4.0以上。如果你早就已经安装过Node并且版本没有达到要求想要升级的话，别着急，后面我会给你提供一种我觉得比较方便的升级步骤。
安装watchman：Homebrew是官方推荐的安装watchman的套件管理工具，它的安装步骤可以参考Homebrew官网。官方推荐安装watchman，否则你可能会遇到node的文件监控bug。
如果你想使用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/目录中执行如下操作：

运行新项目

打开AwesomeProkect.xcodeproj，然在在Xcode中点击run运行；
用文本编辑器打开index.ios.js，编辑一些代码；
在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...其实本来很简单的步骤却因为一些小插曲耽误了好多时间，不过最后的结果还是美好哒！