react-native学习(1)

前记

为啥要学习react-native，其实也算要去赶赶潮流吧，毕竟技术也新，还是FB的开源项目，在github也很受欢迎，作为一个前端开发者，是要了解了解的。

在此记下自己的学习历程，也算是给自己日后复习用吧，大部分知识是能在网上找到的，在学习中总结下，毕竟对js理解不够深，如有错误待以后再更正。

第一步当然是安装配置开发环境，在mac上安装。window暂时不考虑，也不考虑制作安卓版的app，只运行在ios进行调试。

nodejs可以直接去官网下载最新版，版本号大于4.0，如果以前已经下载了，版本不是最新的，可以更新到最新版本(也可以用nvm管理node的版本)。

首先安装n模块：


npm install -g n

升级node.js到最新稳定版：


n stable

安装homebrew，homebrew简称brew，是Mac OSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件，在官网复制如下代码运行。


/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

在命令行中输入 brew install watchman，推荐安装 watchman，否则可能会遇到一个Node.js监视文件系统的bug。

如果你希望使用flow来为js代码加上类型检查，那么在命令行中输入brew install flow来安装flow。

建议定期运行 brew update && brew upgrade 来使您的应用程序保持最新状态。

这个太简单了，直接去appstore里面搜索安装即可。

环境抖配置好了，就可以开始了，首先我们需要初始化一个react-native项目：


$ npm install -g react-native-cli

$ react-native init AwesomeProject

$ cd AwesomeProject/

用终端进入你想要建立项目的目录中，执行代码，即可得到一个最初始的项目架构了。当然因为npm被墙的原因，所以我们需要用国内的镜像，否则在执行$ react-native init AwesomeProject的时候就傻眼了，一直停在安装的页面～让人蛋疼！我们需要：


npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

react-native init AwesomeProject的时候不要在前面加管理员权限，否则会导致一系列权限问题。假如这样执行之后在初始化的时候依然很慢，那就再来几遍吧，因为我就是这样的，不过我还试了其他方法，方法的原理都是一样的，使用淘宝的镜像。如下：

使用config命令：


npm config set registry https://registry.npm.taobao.org

npm info underscore （如果上面配置正确这个命令会有字符串response）

编辑 ~/.npmrc 加入下面内容:


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

现在初始化项目的时候就快多了吧！ps：init后面的是项目名称，可自行修改～

android是安卓工程，ios是苹果的工程，这两个文件夹不需要改。

package.json是一些项目信息。

node_modules是node的模块，是两个工程的依赖，不需要修改。

对于我们来说在*.js里面写代码即可。不做安卓，只需要在index.ios.js里面修改。当前只有一个页面，对应这一个文件，项目大的话需要自己继续建立其他文件。一般以.ios.js结尾

进入项目目录，找到 ios 这个文件夹，打开 AwesomeProject.xcodeproj 这个文件，默认打开工具是xcode，在xcode中点击运行即可看到运行的页面。修改代码后⌘-R刷新代码，可以在页面中看到修改后的效果。

边学习边记录，也方便以后查看，希望能温故知新。

接来下会看看极客学院的视频，已经看到一个做小页面的，很简单，下一篇写一下怎么做。

我的博客