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

lijuan0 2019-07-01

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

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

  • 来源 | 愿码(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下拉列表中安装最新版本:

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

  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”查看完整文档。

相关推荐