React Native开发环境搭建

开发 前端
最近开始全面使用React技术栈开发,耳听得团队不久的将来有计划使用React Native开发app,迫不及待来尝试一波,首先搭建好开发环境并跑起来咱们程序界的经典程序,期间也有一些坑,在这里记录分享给大家。

最近开始全面使用React技术栈开发,耳听得团队不久的将来有计划使用React Native开发app,迫不及待来尝试一波,首先搭建好开发环境并跑起来咱们程序界的经典程序,期间也有一些坑,在这里记录分享给大家。

索引

安装包管理工具

本人使用的是Mac环境,所以以Mac为例,对于Windows,其实差别不大。

安装Homebrew

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

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

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

  1. sudo chown -R `whoami` /usr/local 

安装Node.js

接下来使用Homebrew安装Node.js,Windows环境可以直接去官网下载安装 Node.js :

  1. brew install node 

如果安装下载速度过慢,可以设置使用国内淘宝提供的镜像:

 

  1. npm config set registry https://registry.npm.taobao.org --global  
  2. npm config set disturl https://npm.taobao.org/dist --global 

安装包管理

我们可以自由选择直接使用NPM或者另外安装Yarn包管理工具,对于NPM的使用相信大家都已经很熟悉了,我们这里以Yarn为例:

Yarn 是Facebook提供的替代npm的工具,可以加速node模块的下载。

依然需要使用NPM安装Yarn包:

  1. npm install -g yarn 

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

安装react-native-cli脚手架

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

  1. npm install -g react-native-cli 

安装设置编辑器

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

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

React Native开发环境搭建

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

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

 

  1. // 初始化一个hello项目 
  2. react-native init hello 
  3. cd hello 

 

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

  1. react-native run-ios 

对于版本高于0.45的创建项目,也许你会看到如下错误:

 

  1. Error:   
  2. Build failed: 
  3. Unpacking /Users/zjy/.rncache/boost_1_63_0.tar.gz...  
  4. Print: Entry, ":CFBundleIdentifier", Does Not Exist 

 

降级版本方案

本人经过多方查找,发现是创建项目下载安装node依赖模块时的资源缺失问题,目前***的0.45及以上版本需要下载boost库,该库过大,导致下载出问题,参考:

https://github.com/facebook/react-native/issues/14368

https://github.com/facebook/react-native/issues/14447

解决方案有两种,如果不追求新版本新特性,可以降低创建项目的版本,使用 --version 指令明确设置项目版本:

  1. react-native init MyApp --version 0.44.3 

替换资源文件方案

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

下载如下四个相关文件放到项目根目录下的 .rncache 目录下,进行替换:

React Native开发环境搭建

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

下载后替换:

 

  1. cd ~/.rncache 
  2. cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/ 

 

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

然后删除第三方库文件,在 node_modules/react-native/third-party/ 目录下:

  1. rm -r project/node_modules/react-native/third-part 

再次执行启动程序:

  1. react-native run-ios 

发现可以正常运行了,接下来我们可以在编辑器里编辑我们的项目了,如我们的react-native入口js文件– index.ios.js 文件,刷新即可看到变更。

其他工具

Nuclide

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

责任编辑:未丽燕 来源: 惊鸿三世的博客
相关推荐

2016-08-12 13:22:01

React Nativ环境搭建创建项目

2016-08-12 13:55:06

2023-02-09 07:15:52

开发FlutterReact

2022-04-18 17:28:14

React前端

2013-07-23 06:11:44

Android开发学习Android开发环境Java

2024-03-26 15:19:36

鸿蒙应用开发开发工具

2021-07-25 21:36:24

Windows操作系统功能

2016-10-13 19:01:59

React NativUbuntu

2019-08-29 09:00:55

开发Flutter框架

2009-07-03 16:56:37

JSP开发环境

2011-07-08 16:02:24

iphone

2010-04-03 11:30:15

Widget开发

2011-05-26 10:33:26

Android开发

2011-08-02 17:37:01

IPhone开发 环境搭建

2017-03-02 15:33:24

Android Thi环境搭建

2015-03-30 12:13:23

React NativiOS

2011-08-25 15:02:17

Lua环境搭建EditPlus

2016-08-12 08:49:46

React NativFacebookNative

2015-09-22 09:50:36

FacebookAndroid

2016-08-16 13:44:28

AndroidLinuxADT
点赞
收藏

51CTO技术栈公众号