你好，React Native

tags:开发随笔

在移动开发领域，React Native恐怕是目前最引人瞩目的项目之一。有很多理由让人不得不关注它，同时支持多个平台，性能接近于原生应用，采用javascript开发，大厂背书，等等，各种理由，总有一个适合你。

虽然我目前专注于iOS开发，以Swift和Objective-C作为主要开发语言，但是还是忍不住开始了React Native的尝试之旅。毕竟世界总是在变。提前准备一下，说不定下一个项目就用它了 :)

目标

• 准备ReactNative开发环境
• 运行起一个比较典型的开源Reac Native应用。这里我选的是 HackerNews

环境

环境准备参考https://facebook.github.io/react-native/docs/getting-started.html

我用的是MacBook，OSX 10.11。
XCode 7.3已经安装。

1. 安装或者更新homebrew

官方推荐用homebrew来安装Watchman和Flow。
我之前已经安装了homebrew。如果没有安装的话，可以参考https://coolestguidesontheplanet.com/installing-homebrew-on-os-x-el-capitan-10-11-package-manager-for-unix-apps/
简单说，就是一个命令搞定：

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

2. 安装nvm和node.js

在React Native开发过程中，大量使用node.js来实现一些自动处理的工作。所以node.js是必须的。
React Native需要node.js 4.0以上版本。
Facebook推荐用nvm来安装和管理node.js。nvm 可以帮忙管理同一台机器里的多个node.js版本，并且可以在多个版本的node.js中间切换。
可以运行下面的命令来安装nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

运行完后nvm就安装好了。然后运行下面的命令来安装node.js 5.0:

nvm install 5.0

完毕后nvm会自动将5.0版本设为默认，也可以执行下面的命令手动将5.0设为默认:

nvm use 5.0

3.安装Watchman和Flow

brew install watchman

brew install flow

4.安装ReactNative命令行

执行

sudo npm install -g react-native-cli

我在这里遇到一个错误，提示信息如下:

ERROR EACCES, permission denied '/Users/admin/.babel.json' {"errno":-13,"code":"EACCES","path":"/Users/admin/.babel.json","syscall":"open"} Error: EACCES,

这是文件权限设置的问题，改一下它的权限就好了:

sudo chmod 777 ~/.babel.json

5.下载并运行HackerNews

可以直接在https://github.com/iSimar/HackerNews-React-Native页面中点“Download Zip”按钮。
解压后到文件夹，将终端的当前路径cd到项目路径，然后

npm install

node.js会下载这个工程所需要的模块。
等命令执行完后，找到ios目录下的工程文件HN Reader.xcodeproj，点击就可以使用XCode打开了运行了。

我在这里遇到一个小坑：运行后出现一个错误，信息为

Failed to build DependencyGraph: Watchman error: Cannot read property 'root' of null.

Google之后发现是Watchman版本过低造成的。解决方法

$ brew update
$ brew upgrade watchman

解决后HackNews终于可以运行了，贴一张图:

Simulator Screen Shot 17 Apr 2016, 8.46.40 PM.png