本文介绍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/