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),可以看到如下图所示的目录结构:

React Native之环境搭建

其中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电脑和手机在同一个网络中。

运行成功后的控制台
React Native之环境搭建

运行成功后的模拟器
React Native之环境搭建
 

三、安装过程中遇到的问题以及解决办法

1、执行react-native init Hello,报错如下

React Native之环境搭建

解决办法:安装io.js即可

2、项目打开后提示权限问题

打开项目(Hello.xcodeproj)后,报错如下
React Native之环境搭建
 

解决办法:选中项目文件夹(Hello)点击右键,选择“显示简介-->共享与权限”,添加当前用户(admin),授予读写权限,并点击下方的设置符号,选择“应用到包含的项目”
React Native之环境搭建
 

3、运行后控制台报错

React Native之环境搭建
 

解决办法:sudo chown admin ~/.babel.json

4、运行后模拟器报错
React Native之环境搭建
 

解决办法:依次执行以下命令

1、$ sudo chown -R $(whoami):admin /usr/local

2、$ brew update

3、$ brew upgrade watchman 

执行成功后,关掉Xcode,重新打开运行即可。

相关推荐