React Native之环境搭建
本文使用的环境是Mac OSX 10.11和Xcode 7.0.1
一、环境需求
1、Xcode 6.3以上版本
2、安装Homebrew,这是OSX平台上的软件包管理工具。
在终端执行以下命令即可完成安装:
$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
3、安装io.js,或者安装最新版本的Node.js
$ brew install iojs && brew link iojs --force
如果在安装io.js之前你的环境已经安装了node.js,那么需要执行brew unlink node命令来解除相关引用。
4、安装Node.js,如果已经安装了io.js,此步骤可跳过
$ nvm install node && nvm alias default node
5、安装watchman,主要用来监视文件并且记录文件的改动情况。
$ brew install watchman
6、安装flow,主要用作JavaScript静态类型检查。
$ brew install flow
二、快速开始
1、安装React Native命令行工具
$ npm install -g react-native-cli
2、创建应用
$ react-native init Hello
应用创建完成后,进入项目目录(Hello),可以看到如下图所示的目录结构:
其中android和ios这两个目录分别是两个平台的项目文件,index.android.js和index.ios.js是两个页面对应的js文件。
3、运行应用
进入项目(Hello)的ios目录,打开项目文件(Hello.xcodeproj),直接编译运行即可。运行代码的同时也会自动开启一个node服务器来实现代码的热重载,这样一来你就可以通过cmd+R来查看更新后的页面,而不需要每次都在Xcode中进行重新编译。
不管是iOS还是android,在开发调试阶段,都需要在Mac上启动一个HTTP服务,称为Debug Server,默认运行在8081端口,APP通过Debug Server来加载js。
iOS真机调试,修改HTTP地址即可:
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
这里将localhost改成Mac电脑的IP地址,必须确保Mac电脑和手机在同一个网络中。
运行成功后的控制台
运行成功后的模拟器
三、安装过程中遇到的问题以及解决办法
1、执行react-native init Hello,报错如下
解决办法:安装io.js即可
2、项目打开后提示权限问题
打开项目(Hello.xcodeproj)后,报错如下
解决办法:选中项目文件夹(Hello)点击右键,选择“显示简介-->共享与权限”,添加当前用户(admin),授予读写权限,并点击下方的设置符号,选择“应用到包含的项目”
3、运行后控制台报错
解决办法:sudo chown admin ~/.babel.json
4、运行后模拟器报错
解决办法:依次执行以下命令
1、$ sudo chown -R $(whoami):admin /usr/local
2、$ brew update
3、$ brew upgrade watchman
执行成功后,关掉Xcode,重新打开运行即可。