React Native学习笔记（一）Mac OS X下React Native的环境搭建

本文介绍Mac OS X系统下的React Native环境搭建过程。

1.环境要求：

1) Mac OS X操作系统

2) Xcode6.4或以上版本

3) Node.js4.0或以上版本

4) watchman和flow

2.安装过程

1) Node.js的安装可以在Node.js的官网https://nodejs.org/ 中下载最新的版本。这里下载的是node-v4.4.2.pkg版本。直接双击运行安装就可以了。查看是否安装成功可以在终端中输入如下命令：

   $node -v

如果能够显示版本信息，则表明安装成功。

2) watchman和flow的安装：watchman是用来监控文件变化的，flow是进行类型检查的。推荐使用Homebrew安装，终端命令：

$ brew install watchman
$ brew install flow

3) 通过npm安装react-native-cli命令行工具。

$npm install -g react-native-cli

其中-g这个参数表示全局安装。

如果在安装过程中需要管理员权限，可是给命令添加sudo，然后输入管理员密码。如下：

$sudo npm install -g react-native-cli

至此环境已经搭建完。我们可以创建一个小Demo来检测一下环境搭建的是否成功。

3.创建React Native工程

使用下面这个命令创建一个React Native的项目工程文件

react-native init AwesomeProject

出现上面的提示，说明环境配置的没有问题。

4.执行项目工程

这里有两种执行方式，任选其一就可以。

1）使用命令行的方式，在终端中输入如下命令：

$react-native run-ios

2）找到AwesomeProject.xcodeproj文件,然后双击打开，com + R直接运行。

5.可能遇到的问题

对于这个Demo而言，官网上的教程好像到这里就可以运行了。可是本人第一次并没有运行成功，而是在手机整个屏幕上出现了红色的错误提示。

1）在delegate中服务器的地址并没有替换，如下：

/**
   * Loading JavaScript code - uncomment the one you want.
   *
   * OPTION 1
   * Load from development server. Start the server from the repository root:
   *
   * $ npm start
   *
   * To run on device, change `localhost` to the IP address of your computer
   * (you can get this by typing `ifconfig` into the terminal and selecting the
   * `inet` value under `en0:`) and make sure your computer and iOS device are
   * on the same Wi-Fi network.
   */
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

在上面的注释中有明确的说明，需要将localhost换成本地计算机的ip地址。而且查看的方法也给出了，在终端中输入如下命令：

$ ifconfig

然后寻找en0:下的IP地址，完成localhost为本机ip地址的替换。

2）需要确定Node Serve服务已经正在运行

可以执行npm start命令。有时候执行这个命令，可能8081端口被别的进程占用了，如下图：

可以根据提示执行下面的命令，找出占用8081端口的进程

lsof -n -i4TCP:8081

使用下面的命令关闭该进程：

$ kill -9 90587

其中：这个命令的语法为：

 $ kill -9 <PID> 

可以知道90578为进程的id号。

关闭占用的进程后，可以重新启动node server服务,如下图服务已经开启。

在手机上的运行效果图：

至此React Native环境搭建和第一个React Native 项目hello world程序已经介绍完。

推荐一些学习React Native地址链接：

http://reactnative.cn/docs/0.25/getting-started.html

https://github.com/fbsamples/f8app

http://makeitopen.com/tutorials/building-the-f8-app/planning/