React Native开发环境搭建

最近开始全面使用React技术栈开发，耳听得团队不久的未来有计划使用React Native开发app，火烧眉毛来尝试一波，首先搭建好开发环境并跑起来我们程序界的经典程序，期间也有一些坑，在这里记录分享给你们。

安装包管理工具

本人使用的是Mac环境，因此以Mac为例，对于windows，其实差异不大。

安装Homebrew

Homebrew是为Mac OS量身定制的一款集成包管理工具，咱们使用它很方便的安装Node.js及切换Node.js版本。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"复制代码

注：在Max OS X 10.x版本中使用Homebrew安装软件时可能会发生/usr/local目录不可写的权限问题，此时可使用以下命令修复：

sudo chown -R `whoami` /usr/local复制代码

安装Node.js

接下来使用Homebrew安装Node.js，Windows环境能够直接去官网下载安装Node.js：

brew install node复制代码

若是安装下载速度过慢，能够设置使用国内淘宝提供的镜像：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global复制代码

安装包管理

咱们能够自由选择直接使用NPM或者另外安装Yarn包管理工具，对于NPM的使用相信你们都已经很熟悉了，咱们这里以Yarn为例：

Yarn是Facebook提供的替代npm的工具，能够加速node模块的下载。

依然须要使用NPM安装Yarn包：

npm install -g yarn复制代码

随后咱们就可使用yarn add代替npm install --save了。

安装react-native-cli脚手架

React Native官方提供了一键生成项目初始结构的脚手架，初学者或体验者能够直接安装使用：

npm install -g react-native-cli复制代码

安装设置编辑器

Mac咱们使用Xcode开发iOS APP，安卓开发可使用Eclipse等，另外须要对Xcode编辑器进行简单配置以支持react native：

依次点击打开Xcode编辑器的Menu-》Preferences-》Locations，配置以下图红框中的命令行工具项：

Xcode命令行工具配置

初始化项目及解决运行异常

接下来可使用脚手架初始化一个示例程序了：

// 初始化一个hello项目
react-native init hello
cd hello复制代码

进入项目根目录后，使用run-ios指令启动该iOS APP：

react-native run-ios复制代码

对于版本高于0.45的建立项目，也许你会看到以下错误：

Error:

Build failed:
Unpacking /Users/zjy/.rncache/boost_1_63_0.tar.gz...

Print: Entry, ":CFBundleIdentifier", Does Not Exist复制代码

降级版本方案

本人通过多方查找，发现是建立项目下载安装node依赖模块时的资源缺失问题，目前最新的0.45及以上版本须要下载boost库，该库过大，致使下载出问题，参考:

1. github.com/facebook/re…
2. github.com/facebook/re…

解决方案有两种，若是不追求新版本新特性，能够下降建立项目的版本，使用--version指令明确设置项目版本：

react-native init MyApp --version 0.44.3复制代码

替换资源文件方案

依然但愿使用新版本的解决方案则是手动下载相关文件替换：

下载以下四个相关文件放到项目根目录下的.rncache目录下，进行替换：

rncache文件

下载地址：pan.baidu.com/s/1kV5iVzD.

下载后替换：

cd ~/.rncache
cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/复制代码

依次使用cp指令复制替换四个文件；

而后删除第三方库文件，在node_modules/react-native/third-party/目录下：

rm -r project/node_modules/react-native/third-part复制代码

再次执行启动程序：

react-native run-ios复制代码

发现能够正常运行了，接下来咱们能够在编辑器里编辑咱们的项目了，如咱们的react-native入口js文件--index.ios.js文件，刷新便可看到变动。

其余工具

Nuclide

Nuclide是由Facebook提供的一款基于atom编辑器的集成开发环境，可用于编写、运行和 调试React Native应用。

Nuclide的入门文档

原创文章，欢迎访问个人博客：熊建刚的博客。