共计 3765 个字符,预计需要花费 10 分钟才能阅读完成。
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。
首先,我们将安装使用纯 React Native 应用程序所需的所有依赖项,从用于 macOS 的 Homebrew 包管理器开始。如项目主页上所述,可以通过以下命令从终端轻松安装 Homebrew:
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
一旦安装了 Homebrew,它就可以用来安装 React Native 开发所需的依赖项:Node.js 和 nodemon。如果你是 JavaScript 开发人员,那么你可能已经安装了 Node.js.
请注意,对于 React Native 开发,您将需要 Node.js 版本 8 或更高版本。如果尚未安装 Node.js,可以使用 Hombrew 通过以下命令安装它:
brew install node
我们还需要 nodemon React Native 在后台使用的 软件包,以便在开发过程中实现重新加载等功能。nodemon 使用 Homebrew 通过以下命令安装:
brew install watchman
我们当然还需要 React Native CLI 来运行引导 React Native 应用程序的命令。可以 npm 通过以下命令全局安装:
npm install -g react-native-cli
安装 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 下拉列表中安装最新版本:
不幸的是,设置 Android Studio 以支持 Android React Native 开发并不是那么简单,需要一些非常具体的安装步骤。
既然已经安装了所有依赖项,我们就可以通过命令行运行纯 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”查看完整文档。