翻译 | 《JavaScript Everywhere》第25章 挪动应用程序公布

写在最后面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了进步大家的浏览体验，对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央，或者你有任何意见或者倡议，能够在评论区留言，或者加我的微信：code_maomao，欢送互相沟通交流学习。

(ﾟ∀ﾟ)..:*☆哎哟不错哦

第25章 挪动应用程序公布

在我上世纪90年代中期的高中，为你的TI-81图形计算器下载游戏是一种风潮。

有人会失去一个游戏的拷贝件，而后它会像野火一样蔓延开来，咱们每个人轮流用一根数据线把计算器连贯到另一个计算器上，以便加载游戏。在你的计算器上玩游戏是一种既能让你在课后或自习室里实现课余时间的办法，又能放弃做作业的样子。然而，正如你所设想的，这种调配办法很慢，须要两个学生放弃连贯几分钟，而其余学生则只能期待着。明天，咱们的数字袖珍计算机比我那简陋的绘图计算器功能强大得多，局部起因是咱们能够通过可装置的第三方应用程序轻松扩大其性能。

随着咱们最后的利用程序开发实现，咱们当初能够公布咱们的应用程序，这样其他人能够拜访它。在本章中，咱们将理解如何配置咱们的应用程序。

而后咱们将在Expo上公开公布咱们的利用。

最初，咱们将生成能够提交到苹果或谷歌Play仓库的利用程序包。

app.json配置

Expo应用程序包含一个app.json文件，该文件用于配置特定于应用程序的设置。

当咱们生成一个新的Expo应用程序时，会主动为咱们创立一个app.json文件。让咱们看一下为咱们的应用程序生成的文件：

{"expo": {"name": "Notedly","slug": "notedly-mobile","description": "An example React Native app","privacy": "public","sdkVersion": "33.0.0","platforms": ["ios", "android"],"version": "1.0.0","orientation": "portrait","icon": "./assets/icon.png","splash": {"image": "./assets/splash.png","resizeMode": "contain","backgroundColor": "#ffffff"},"updates": {"fallbackToCacheTimeout": 1500},"assetBundlePatterns": ["**/*"],"ios": {"supportsTablet": true},"android": {}}}

其中大多数配置是不言自明的，但让咱们回顾一下它们的目标：

  • name

咱们的应用程序的名称。

  • slug

用于公布Expo应用程序的URL名称，位于expo.io/project-owner/slug。

  • description

对咱们我的项目的形容，将在通过Expo公布应用程序时应用。

  • privacy

Expo我的项目的公共可用性。能够将其设置为public或unlisted。

  • sdkVersion

Expo SDK版本号。

  • platforms咱们的指标平台，包含ios, android, and web.
  • version

咱们应用程序的版本号，应遵循语义版本规范。

  • orientation方向

咱们应用程序的默认方向，能够应用纵向或横向值锁定，也能够将用户设施的旋转方向与默认方向匹配。

  • icon

应用程序图标的门路，将同时用于iOS和Android。

  • splash

应用程序加载屏幕的图像地位和设置。

  • updates

加载利用后，咱们的利用应如何通过地面（OTA）更新进行查看的配置。该fallbackToCacheTimeout参数容许咱们指定工夫长度（以毫秒为单位）。

  • assetBundlePatterns

容许咱们指定应与咱们的应用程序捆绑在一起的资源的地位。

  • ios和android

启用特定于平台的设置。

此默认配置为咱们的应用程序提供了松软的根底。在Expo文档中能够找到许多其余设置。

图标和应用程序加载屏幕

咱们设施上的小方形图标已成为古代社会中最出名的设计之一。闭上你的眼睛，我置信你能够设想到数十个图标，包含徽标或特定的背景色彩。此外，当用户点击图标时，会呈现一个初始的动态“启动屏幕”，该初始屏幕在应用程序加载时显示。到目前为止，咱们曾经应用了默认的空白Expo图标和启动屏幕。咱们能够在应用程序中将其替换为自定义的设计。

我在assets/custom文件夹中蕴含一个“值得注意的”图标和启动屏幕。咱们能够通过将它们替换为assets目录中的图像或更新咱们的app.json配置以指向自定义子目录中的文件来利用它们。

App 图标

icon.png文件是一个正方形1024×1024像素PNG文件。如果咱们应用app.json中的属性指向该文件，Expo将为各种平台和设施生成适当的图标大小。图标应齐全是正方形，没有任何通明像素。这是包含应用程序图标的最简略、最间接的办法：

"icon": "./assets/icon.png",

除了单个跨平台图标，咱们还能够抉择蕴含特定于平台的图标。这种办法的次要长处是包含实用于Android和iOS的独自图标款式，尤其是如果你有趣味应用Android的图标款式时。

自适应图标。

对于iOS，咱们将持续应用单个1024×1024 png。在app.json文件中：

"ios": {"icon": IMAGE_PATH}

要应用Android的自适应图标，咱们须要指定一个前台图像，一个背景色彩（或backgroundImage）和一个后备动态图标：

"android": {"adaptiveIcon": {"foregroundImage": IMAGE_PATH,"backgroundColor": HEX_CODE,"icon": IMAGE_PATH}}

对于咱们的用例，咱们能够持续应用单个动态图标。

开机画面

初始屏幕是在咱们的应用程序在设施上启动时短暂显示的全屏图像。咱们能够应用在assets/custom中找到的默认图片替换默认的Expo图片。只管设施的大小在平台内和平台之间会有所不同，但我还是抉择应用1242×2436的大小的

Expo文件。而后，Expo将调整图像的大小，以跨设施屏幕和宽高比工作。

咱们能够在app.json文件中配置初始屏幕，如下所示：

"splash": { "image": "./assets/splash.png", "backgroundColor": "#ffffff", "resizeMode": "contain" },

默认状况下，咱们设置的是红色背景色，当图像加载时，该色彩可能可见；或者，取决于咱们抉择的色彩。

resizeMode，作为初始屏幕图像四周的边框。咱们能够更新它以匹配屏幕的色彩：

"backgroundColor": "#4A90E2",

resizeMode批示如何针对各种屏幕尺寸调整图像大小。

通过设置为contain时，咱们保留了原始图像的长宽比。

当你应用contain时，某些屏幕尺寸或分辨率将把backgroundColor作为初始屏幕图像四周的边框。

或者，咱们能够将resizeMode设置为cover，这将扩大图像以填充整个屏幕。

因为咱们的应用程序具备轻微的突变，因而咱们将resizeMode设置为涵盖：

"resizeMode": "cover"

图25-1。咱们的应用程序启动画面

以此配置了咱们的图标和初始屏幕图像（请参见图25-1）。当初，咱们筹备钻研如何公布咱们的应用程序，以使其他人能够拜访它。

Expo公布

在开发过程中，咱们的应用程序可通过局域网在手机上的Expo Client应用程序中拜访。这意味着只有咱们的开发电脑和手机在同一网络上，咱们就能够拜访该应用程序。Expo使咱们可能公布我的项目，该我的项目将应用程序上传到Expo CDN并为咱们提供可公开拜访的URL。这样，任何人都能够通过Expo Client利用程序运行咱们的应用程序。这对于测试或疾速公布应用程序很有用。

要公布咱们的我的项目，咱们能够单击浏览器的Expo Dev Tools中的“公布或从新公布我的项目”链接（请参见图25-2），或在咱们的终端输出expo publish。

图25-2。咱们能够间接从Expo Dev Tools公布咱们的应用程序

打包实现后，任何人都能够拜访https://exp.host/@/通过Expo Client App拜访该应用程序。

创立本机版本

尽管间接通过Expo公布是测试或疾速应用的绝佳抉择，但很可能咱们心愿通过Apple App Store或Google Play Store公布咱们的应用程序。为此，咱们将构建包上传到各自商店中。

Windows用户

依据Expo文档，Windows用户须要启用Linux的Windows子系统（WSL）。为此，请依照Microsoft提供的Windows 10装置指南。

iOS

生成iOS版本须要具备Apple Developer Program，每年免费99美元。应用该帐户，咱们能够在app.json文件中为iOS增加一个bundleIdentifier。

此标识符应遵循反向DNS表示法：

"expo": {"ios": {"bundleIdentifier": "com.yourdomain.notedly"}}

随着app.json文件的更新，咱们能够生成构建。在终端应用程序中，从我的项目目录的根目录中输出：

$ expo build:ios

运行构建后，零碎将提醒你应用Apple ID登录。登录后，零碎将询问你几个无关如何解决凭据的问题。Expo可能为咱们治理所有凭据和证书，你能够通过在以下每个提示符下抉择第一个选项来容许它们：

? How would you like to upload your credentials? (Use arrow keys)❯ Expo handles all credentials, you can still provide overridesI will provide all the credentials and files needed, Expo does limited validation? Will you provide your own Apple Distribution Certificate? (Use arrow keys)❯ Let Expo handle the processI want to upload my own file? Will you provide your own Apple Push Notifications service key? (Use arrow keys)❯ Let Expo handle the processI want to upload my own file

如果你领有无效的Apple Developer Program帐户，Expo将生成文件，该文件能够提交给Apple App Store。

安卓零碎

对于Android，咱们能够生成Android打包文件（APK）或Android应用程序捆绑包（AAB）文件。Android App Bundles是更古代的格局，所以让咱们走这条路。

如果你有趣味，Android开发人员文档详细描述了App Bundle的益处。

在生成捆绑包之前，让咱们更新app.json文件蕴含一个Android标识符。与iOS相似，这应该采纳反向DNS表示法：

"android": {"package": "com.yourdomain.notedly"}

这样，咱们可用于从终端应用程序生成利用程序包。确保进入我的项目的根目录并运行以下命令：cd

$ build:android -t app-bundle

必须对利用捆绑包进行签名。只管咱们能够本人生成签名，但Expo能够为咱们治理密钥库。运行命令生成捆绑包后，你将看到以下提醒：

? Would you like to upload a keystore or have us generate one for you?If you don't know what this means, let us handle it! :)1) Let Expo handle the process!2) I want to upload my own keystore!

如果抉择1，Expo将为你生成应用程序捆绑包。在该过程完结时，你能够下载文件，该文件能够上传到Google Play商店。

公布到App Store

因为审查指南的变动和相干费用，我将不会介绍将应用程序提交到Apple App Store或Google Play商店的具体过程。Eopo文档很好地会集了资源和指南，并且是无关如何将利用公布到商店的过程的有用且最新的指南。

论断

在本章中，咱们钻研了如何公布和公布React Native应用程序。

Expo的工具使咱们可能疾速公布用于测试的应用程序，并生成能够上传到应用程序仓库的生产版本。Expo还为咱们提供了用于管制证书和依赖项的选项。

这样，咱们就胜利编写并公布了有后端数据的API，一个Web应用程序，一个桌面应用程序和跨平台挪动应用程序！

如果有了解不到位的中央，欢送大家纠错。如果感觉还能够，麻烦您点赞珍藏或者分享一下，心愿能够帮到更多人。