文档章节

React Native开发环境搭建

熊建刚
 熊建刚
发布于 2017/09/10 17:11
字数 1007
阅读 70
收藏 2

码上生花,ECharts 作品展示赛正式启动!>>>

安装包管理工具

本人使用的是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的入门文档

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

© 著作权归作者所有

熊建刚
粉丝 64
博文 21
码字总数 88314
作品 0
海淀
程序员
私信 提问
加载中
请先登录后再评论。
linux平台安装React Native遇到的坑

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011068702/article/details/82631458 3年前我在windows平台安装过React Native,我一直都记忆犹新,那个时候f...

chenyu_insist
2018/09/11
0
0
初次尝试使用typescript开发react-native

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

力谱宿云
2017/02/16
2K
0
React Native Windows Android开发环境搭建

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

恒源祥
2016/09/13
59
0
React Native \ WEEX 开发文档汇总

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

V1admirMakarov
2018/01/11
0
0
React Native-路由跳转

搭建完RN开发环境后(搭建方式可查看https://www.cnblogs.com/luoyihao/p/11178377.html),要实现多个页面之间的跳转。 1.这时需要安装react-navigation(在此之前的Navigator和ex-Navigati...

osc_ehnjp0jy
2019/07/21
2
0

没有更多内容

加载失败,请刷新页面

加载更多

如何生成随机的字母数字字符串? - How to generate a random alpha-numeric string?

问题: I've been looking for a simple Java algorithm to generate a pseudo-random alpha-numeric string. 我一直在寻找一种简单的 Java算法来生成伪随机的字母数字字符串。 In my situat......

技术盛宴
34分钟前
11
0
linux 搭建magent+memcached 集群

1.准备环境: 两台云服务器A,B A作为代理服务器,安装magent代理软件。 B作为memcached服务器,开3个端口,作为3台memcached服务器,组成集群。 具体的常规操作看以下文章,需要注意几个命令,...

west_coast
昨天
25
0
如何找到此卷不包含可识别的文件系统移动磁盘的数据

问题描述: 此卷不包含可识别的文件系统说明这个盘的文件系统结构损坏了。如何找到此卷不包含可识别的文件系统移动磁盘的数据具体恢复方法可以看正文了解(不格式化的恢复方法) 工具/软件:...

alkcendkljk
昨天
12
0
当有键盘时如何在开始编辑时使UITextField向上移动?

问题: With the iOS SDK: 使用iOS SDK: I have a UIView with UITextField s that bring up a keyboard. 我有一个带有UITextField的UIView , UITextField一个键盘。 I need it to be able......

fyin1314
昨天
11
0
聊聊puma的ChangedEvent

序 本文主要研究一下puma的ChangedEvent Event puma/core/src/main/java/com/dianping/puma/core/event/Event.java public abstract class Event implements Serializable {private stat......

go4it
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部