React Native开发工具:Expo,React Native CLI,CocoaPods

React Native开发工具:Expo,React Native CLI,CocoaPods

image
  • 来源 | 愿码(ChainDesk.CN)内容编辑
  • 愿码Slogan | 连接每个程序员的故事
  • 网站 | http://chaindesk.cn
  • 愿码愿景 | 打造全学科IT系统免费课程,助力小白用户、初级工程师0成本免费系统学习、低成本进阶,帮助BAT一线资深工程师成长并利用自身优势创造睡后收入。
  • 官方公众号 | 愿码 | 愿码服务号 | 区块链部落
  • 免费加入愿码全思维工程师社群 | 任一公众号回复“愿码”两个字获取入群二维码

本文阅读时长:6min

在本文中,你将了解各种React Native开发工具 - Expo,React Native CLI,CocoaPods。也将学习如何设置Expo和React Native CLI。

在大量的React Native开发工具中Expo, React Native CLI,CocoaPods是比较受欢迎的。与任何开发工具一样,在灵活性和易用性之间需要进行权衡。建议首先使用Expo进行React Native开发工作流程,除非您确定需要访问本机代码。

Expo


Expo是一个免费的开源工具链,围绕React Native构建,可帮助您使用JavaScript和React 构建原生iOS和Android项目 。

Expo正在成为一个独立的生态系统,由五个相互关联的工具组成:

  • Expo CLI:Expo的命令行界面。我们将使用Expo CLI来创建,构建和提供应用程序。
  • Expo开发人员工具:这是一个基于浏览器的工具,只要通过expo start命令从终端启动Expo应用程序,它就会自动运行 。为开发中的应用程序提供活动日志,并快速访问本地运行应用程序并与其他开发人员共享应用程序。
  • Expo Client:适用于Android和 iOS的应用程序 。此应用程序允许您在设备上的Expo应用程序中运行React Native项目,而无需安装它。这允许开发人员在真实设备上热重载,或与其他任何人共享开发代码,而无需安装它。
  • Expo Snack:这个网络应用程序允许在浏览器中处理React Native应用程序,并预览您正在处理的代码。如果你曾经使用过CodePen或JSFiddle,那么Snack与应用于React Native应用程序的概念相同。
  • Expo SDK:这是一个包含大量JavaScript API 的SDK, 它提供了基本React Native软件包中没有的Native功能,包括使用设备的加速计,摄像头,通知,地理位置等等。这个SDK随着使用Expo创建的每个新项目一起出现。

这些工具共同构成了Expo工作流程。使用Expo CLI,您可以创建和构建具有Expo SDK支持的新应用程序 XDE / CLI 还提供了一种简单的方法来为您的开发中应用程序提供服务,方法是将代码自动推送到Amazon S3并为项目生成URL。从那里,CLI生成链接到托管代码的QR代码。在您的iPhone或Android设备上打开Expo Client应用程序,扫描QR码,然后BOOM那里有您的应用程序,配备实时/热重载!由于该应用程序托管在Amazon S3上,您甚至可以与其他开发人员实时共享开发中的应用程序。

React Native CLI


使用该命令创建新React Native应用程序的原始引导方法如下:

react-native init

这是由React Native CLI提供的。如果确定需要访问应用程序的本机层,可能只会使用这种引导新应用程序的方法。

在React Native社区中,使用此方法创建的应用程序被称为纯React Native应用程序,因为所有开发和本机代码文件都向开发人员公开。虽然这提供了最大的自由度,但它也迫使开发人员维护本机代码。如果你是一名JavaScript开发人员,因为你打算仅使用JavaScript编写本机应用程序而跳到React Native上,那么必须在React Native项目中维护本机代码可能是此方法的最大缺点。

另一方面,在处理使用以下命令引导的应用程序时,将可以访问第三方插件:

react-native init

直接访问代码库的本机部分。还可以回避当前Expo的一些限制,特别是无法使用背景音频或后台GPS服务。

CocoaPods


一旦开始使用具有使用本机代码的组件的应用程序,你将在开发中使用CocoaPods。CocoaPods是Swift和Objective-C Cocoa项目的依赖管理器 。它与npm几乎相同,但管理本机iOS代码而不是JavaScript代码的开源依赖项 。

React Native使用CocoaPods进行一些 iOS集成,因此对管理器有一个基本的了解可能会有所帮助。同样,可以使用以下命令安装这些依赖项:

pod install

Ruby是CocoaPods运行所必需的。在命令行运行该命令以验证Ruby已安装:

ruby -v 

如果没有,可以使用以下命令与Homebrew一起安装:

 brew install ruby

安装Ruby后,可以通过以下命令安装CocoaPods:

sudo gem install cocoapods

规划应用并选择工作流程


在尝试选择最适合应用需求的开发工作流程时,您需要考虑以下几点:

  • 我是否需要访问代码库的本机部分?
  • 我的应用程序中是否需要任何不受Expo支持的第三方软件包?
  • 我的应用程序不在前台时是否需要播放音频?
  • 我的应用程序不在前台时是否需要定位服务?
  • 需要推送通知支持吗?
  • 我在Xcode和Android Studio工作是否适应?

根据我的经验,Expo通常是最好的起点。它为开发过程提供了很多好处,如果应用程序超出原始要求,则可以在弹出过程中提供一个逃生舱。如果确定应用程序需要某个Expo应用程序无法提供的内容,或者确定需要使用Native代码,我建议仅使用React Native CLI开始开发。

React Native CLI设置


将从应用程序的React Native CLI设置开始,创建一个新的纯React Native应用程序,从而可以访问所有Native代码,但也需要安装Xcode和Android Studio。

  1. 首先,我们将安装使用纯React Native应用程序所需的所有依赖项,从用于macOS 的Homebrew包管理器开始。如项目主页上所述,可以通过以下命令从终端轻松安装Homebrew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. 一旦安装了Homebrew,它就可以用来安装React Native开发所需的依赖项: Node.js和nodemon。如果你是JavaScript开发人员,那么你可能已经安装了Node.js. 
    请注意,对于React Native开发,您将需要Node.js版本8或更高版本。如果尚未安装Node.js,可以使用Hombrew通过以下命令安装它:
brew install node
  1. 我们还需要nodemon React Native在后台使用的 软件包,以便在开发过程中实现重新加载等功能。nodemon使用Homebrew通过以下命令安装:
brew install watchman
  1. 我们当然还需要React Native CLI来运行引导 React Native应用程序的命令 。可以npm通过以下命令全局安装:
npm install -g react-native-cli
  1. 安装CLI后,创建新的纯React Native应用程序所需的全部内容如下:
react-native init name-of-project

这将在新name-of-project目录中创建一个新项目。该项目公开了所有Native代码,并且需要Xcode来运行iOS应用程序和Android Studio以运行Android应用程序。幸运的是,安装Xcode以支持iOS React Native开发是一个简单的过程。第一步是从App Store下载Xcode并进行安装。第二步是安装Xcode命令行工具。要执行此操作,请打开Xcode,从Xcode菜单中选择Preferences ...,打开Locations面板,然后从Command Line Tools下拉列表中安装最新版本:

image
  1. 不幸的是,设置Android Studio以支持Android React Native开发并不是那么简单,需要一些非常具体的安装步骤。

  2. 既然已经安装了所有依赖项,我们就可以通过命令行运行纯React Native项目了。iOS应用程序可以通过以下方式执行:
    Andriod应用程序可以通过以下方式启动:

react-native run-ios

这些命令中的每一个都应该为正确的平台启动相关的模拟器,安装我们的新应用程序,并在模拟器中运行应用程序。

react-native run-android

Expo CLI设置
可以使用终端npm通过以下命令安装Expo CLI :

npm install -g expo

Expo CLI可用于完成Expo GUI客户端可以执行的所有重要操作。对于可以使用CLI运行的所有命令,关注公众号“愿码”,后台回复“Expo CLI”查看完整文档。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容