文档章节

React Native开发环境搭建

熊建刚
 熊建刚
发布于 2017/09/10 17:11
字数 1007
阅读 41
收藏 2
点赞 0
评论 0

安装包管理工具

本人使用的是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. https://github.com/facebook/react-native/issues/14368
  2. https://github.com/facebook/react-native/issues/14447

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

react-native init MyApp --version 0.44.3

替换资源文件方案

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

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

rncache文件

下载地址:https://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的入门文档

原创文章,欢迎访问我的博客:熊建刚的博客

© 著作权归作者所有

共有 人打赏支持
熊建刚
粉丝 63
博文 20
码字总数 86648
作品 0
海淀
程序员
初次尝试使用typescript开发react-native

typescript是javascript的超集,在javascript的基础上添加了可选的静态类型,非常适合团队开,这次我们尝试使用typescript来开发react-native应用 搭建react-native开发环境 安装yarn和react...

力谱宿云 ⋅ 2017/02/16 ⋅ 0

React Native Windows Android开发环境搭建

安装步骤: 1) ReactNative Android运行环境 (一) Python安装 (二) NodeJs安装 (三) React-native安装 (四) JDK安装 (五) Android SDK解压 (六) Gennymotion安装 2) ReactNative开发环境 (一...

恒源祥 ⋅ 2016/09/13 ⋅ 0

React Native \ WEEX 开发文档汇总

React-Native 开发基础文档 环境构建 参照官方提供文档的指引 集成到现有应用 基本语法 入门基础 组件及api JsX语法基础 React-Native生命周期 ES6基础 promise async/await 状态管理 Redux状...

V1admirMakarov ⋅ 01/11 ⋅ 0

React入门第二弹——React Native环境搭建

上一弹讲了React的内容,为什么这一弹突然就跳到了React Native了,其实,我想说的是我看中的还是RN,使用它能够实现跨平台; 原因下一弹再讲,先上环境搭建,可能在搭建环境的过程中会遇到若...

我家有宝 ⋅ 2016/01/14 ⋅ 0

RN学习第一篇:MAC配置RN环境

我们在使用之前我们最基本的就是环境的搭建,不能搭建环境,一切白搭,这篇文章我就简单的介绍一下环境搭建过程,并且运行第一个项目 React Native搭建开发环境.png 文章目录 1、React Nativ...

辉哥de简书 ⋅ 2017/12/24 ⋅ 0

react-native/react 开发中遇到的问题

前言 最近对react-native产生些兴趣,准备学一学,写写demo练练手,然而之前对react页不是很熟悉,所以一边学一边写code,一边看react-native的文档一边撘环境。中途还是遇到很多问题,写篇文...

TokenYang ⋅ 2017/12/20 ⋅ 0

谁有亲测的React Native window 搭建开发环境的文档呀?

谁有亲测的React Native window 搭建开发环境的文档呀? 分享下 谢谢了。

超人不会飞 ⋅ 2016/11/17 ⋅ 0

iOS开发者React Native学习路线

http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS-developer/ 既然是写给iOS开发者的,那么我默认你已经掌握iOS原生应用开发的基本知识,所以对iOS原生开发的相关内容不做解...

卡奇匠 ⋅ 2016/12/13 ⋅ 0

windows搭建react-native开发环境

环境:windows8 64位 android studio带sdk git客户端 node最新版本 1. 首先装好git客户端 2. 安装android studio记得勾选里面的sdk,主要用的就是这个。 3. 配置ANDROID_HOME环境变量为sdk下...

会炒饭的美工 ⋅ 2016/01/11 ⋅ 0

搭建我的网站的mobile版的开发环境

image.png 之前我已经搭建过一个开发移动web的react开发环境,在那时我就已经想把我的极客教程弄一个手机上体验好的web app,无奈公司业务太多,整天忙着赶项目,下班回去的时候疲惫不堪,已...

极客教程 ⋅ 2017/10/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

【elasticsearch】 随笔 Date datatype

一。时间类型的本质 首先json是没有时间类型的,对于es来说,时间类型的标示可以是下面三种情况 1.一个时间格式的字符串,如:"2014-11-27T08:05:32Z","2015-01-01" or "2015/01/01 12:10:3...

xiaomin0322 ⋅ 10分钟前 ⋅ 0

阿里云资源编排ROS使用教程

阿里云资源编排ROS详细内容: 阿里云资源编排ROS使用教程 资源编排(Resource Orchestration)是一种简单易用的云计算资源管理和自动化运维服务。用户通过模板描述多个云计算资源的依赖关系、...

mcy0425 ⋅ 12分钟前 ⋅ 0

适配器设计模式

1、适配器模式 把一个类的接口变换成客户端所期待的另一种接口 使原本因接口不匹配而无法在一起工作的两个类能够在一起工作 分为类的适配器模式和对象的适配器模式 2、类适配器模式 类的适配...

职业搬砖20年 ⋅ 16分钟前 ⋅ 0

npm操作报错 _stream_writable.js:61

有一天 不知道什么原因(估计和node的版本有关),无论你做什么npm的操作 都会报错/usr/local/lib/node_modules/npm/node_modules/readable-stream/lib/_stream_writable.js:61 这时候只要执...

lilugirl ⋅ 20分钟前 ⋅ 0

Eclipse安装插件的几种方式

Eclipse魅力之一就是支持可扩展的插件,来丰富自身的功能,这种方式也是建立在开源思想之上的。具体使用什么方式去安装插件,要看我们拿到的是什么。 1. 拿到的是一串URL,如http://subclips...

GordonNemo ⋅ 22分钟前 ⋅ 0

div图片叠加

css实现代码如下: <div style="position: relative;"><!--这个层为外面的父层,需设置相对位置样式--> <div style="position: absolute;"><!--子层,需设置绝对位置样式--> <i......

niithub ⋅ 24分钟前 ⋅ 0

作用域slot

如果父组件需要使用子组件中的内容怎么办,比如父组件需要控制子组件的显示 <div id="root"><child><template slot-scope="props"><h1>{{props.item}} <div>编辑</div></h1><......

金于虎 ⋅ 26分钟前 ⋅ 1

HongHu commonservice-eureka 项目构建过程

上一篇我们回顾了关于 spring cloud eureka的相关基础知识,现在我们针对于HongHu cloud的eureka项目做以下构建,整个构建的过程很简单,我会将每一步都构建过程记录下来,希望可以帮助到大家...

明理萝 ⋅ 29分钟前 ⋅ 1

xml和对象的相互转化

@Data//setter和getter方法,toString和equals,hashcode方法@EqualsAndHashCode//代表重写equals和hashcode方法@XmlAccessorType(XmlAccessType.FIELD)public class Classroom {@X......

拐美人 ⋅ 29分钟前 ⋅ 0

tableView cell的高度 分组头部尾部的高度 自适应

@property (nonatomic) CGFloat rowHeight; // default is UITableViewAutomaticDimension@property (nonatomic) CGFloat sectionHeaderHeight; // default is UITableViewA......

娜一片蓝色星海 ⋅ 30分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部