React Native开发环境搭建

最近开始全面使用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,配置如下图红框中的命令行工具项:

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

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


  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 目录下,进行替换:

下载地址: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应用。

作者:佚名

来源:51CTO

时间: 2024-08-03 09:23:11

React Native开发环境搭建的相关文章

《React Native移动开发实战》一一1.3 搭建React Native开发环境

1.3 搭建React Native开发环境 "磨刀不误砍柴工",在正式开发React Native应用之前,需要先搭建好React Native的开发环境.搭建React Native开发环境有以下几个主要步骤. 原生开发工具:iOS开发使用Xcode,Android开发使用Android Studio and SDK Tools. Node.js(https://nodejs.org/):React Native是借助Node.js,即JavaScript运行时来创建JavaScr

React Native iOS环境搭建

感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废话不多说了,下面简单的列出步骤吧. 1 . 安装Homebrew Homebrew主要用于安装后面需要安装的watchman.flow 打开MAC的终端,输入如下命令: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 经

《React Native移动开发实战》一一第2章 全局解析React Native开发的基础

第2章 全局解析React Native开发的基础 技术 在第1章搭建好React Native开发环境之后,我们开发了第一个React Native应用.虽然其功能比较简单,但却向着学习React Native开发迈开了一大步,意味着读者能够独立完成一个React Native应用的开发. 从本章开始,我们将从零开始开发一个功能更加完备.强大的React Native应用.还在等什么?赶紧进入状态吧! 本章主要内容有: 掌握版本控制工具Git的使用. 了解JSX解决方案. 熟悉React Na

Android NDK r8 Cygwin CDT 在window下开发环境搭建 安装配置与使用 详细图文讲解

android 最新 NDK r8 在window下开发环境搭建 安装配置与使用 详细图文讲解,完整实际配置过程记录(原创) 一直想搞NDK开发却一直给其他事情耽搁了,参考了些网上的资料今天终于把环境搭建起来了,把过程记录下来分享给大家. 内容目录: 1.默认基础环境 2.NDK下载与配置 3.安装Cygwin 4.用NDK编译 5.安装CDT插件 6.安装Sequoyah插件 7.JNI编译环境配置 画了一个思维导图让大家一目了然配置过程   -------------------------

Eclipse + CDT + YAGARTO + J-Link,STM32开源开发环境搭建与调试

Eclipse+CDT+YAGARTO+J-Li:开源开发环境搭建与调试:作者:Chongqing:邮箱:ycq.no1@163.com:文档版本:V1.0:发布日期:2014-08-04:前言:此文档本着开源精神,基于LGPL协议发布:因网上开源的单片机.微控制器开发平台信息很少,故:因用ARM公司的KeiluVision开发环境开:因Eclipse是一个       Eclipse + CDT + YAGARTO + J-Link,STM32 开源开发环境搭建与调试 作者 :Chongqin

微信开发学习总结(一)——微信开发环境搭建(转)

目前移动开发处于比较火的的趋势,很多的开发者都跃跃欲试,目前移动App开发领域主要分为以下几种类型 我在平时的工作中接触得比较多的就是基于Android的Native App开发和基于微信公众号的Light App开发,今天就来带领大家快速进入微信公众号的开发领域. 一.微信开发环境搭建 工欲善其事,必先利其器.要做微信公众号开发,那么要先准备好两样必不可少的东西: 1.要有一个用来测试的公众号. 2.用来调式代码的开发环境. 1.1.注册测试公众号 微信公众号分为服务号.订阅号.企业号,订阅号

《Android应用开发与系统改造实战》——1.5节Android NDK开发环境搭建

1.5 Android NDK开发环境搭建 Android应用开发与系统改造实战 1.5.1 Android NDK简介 Android NDK是编译嵌入在Android应用中的原生代码(C或C++)的工具. Android应用运行在Dalvik虚拟机上.NDK允许开发者用原生代码(C或C++)实现应用的一部分.这将给某些应用带来好处,这种方式可重用代码,而且在某些情况下可加快运行速度. NDK提供了将C和C++源代码生成原生代码库的工具和文件:提供了将原生库嵌入apk文件的方法:提供了兼容An

PHP开发环境搭建详细教程

     首先你需要安装Apache Server,这里以当前最新版Apache Server2.4为例进行说明,可惜官网并没有提供最新版的msi安装包,连编译后的binary二进制压缩包都没提供,不过我已经编译并上传到我的百度网盘,下载地址如下:       Apache Server2.4最新版安装包   下载下来后直接解压到任意目录,如图:  然后你需要安装Apache Server系统服务,先cd 到apacher server2.4/bin下,然后执行如下命令: Java代码   ht

【物联网】QCA4010开发环境搭建(二)(解决WIN10下不能驱动问题)

更多资料,请参考:中电港论坛 http://bbs.cecport.com/forum.php?mod=forumdisplay&fid=64&page=1 感谢中电港,低价QCA4010开发板入手,终于腾出时间来研究一下这个高大上的开发板 4010与4004一样,内部集成了Tensilica Xtensa处理器,主频可达130MHz.Xtensa处理器是Tensilica公司推出的一个可自由装组.可弹性扩张,并可以自动合成的处理器核心,它的指令集构架 (ISA) 拥有专利权,32位处理器