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，重新打开运行即可。