Expo大作战(十五)--expo中splash启动页的详细机制

简要：本系列文章讲会对expo进行全面的介绍，本人从2017年6月份接触expo以来，对expo的研究断断续续，一路走来将近10个月，废话不多说，接下来你看到内容，讲全部来与官网

我猜去全部机翻+个人修改补充+demo测试的形式，对expo进行一次大补血！欢迎加入expo兴趣学习交流群：597732981

【之前我写过一些列关于expo和rn入门配置的东i西，大家可以点击这里查看：从零学习rn开发】

相关文章：

Expo大作战(一)--什么是expo，如何安装expo clinet和xde，xde如何使用

Expo大作战(二)--expo的生命周期，expo社区交流方式，expo学习必备资源，开发使用expo时关注的一些问题

Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo，expo的局限性，开发时项目选型注意点等

Expo大作战(四)--快速用expo构建一个app，expo中的关键术语

Expo大作战(五)--expo中app.json 文件的配置信息

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

Expo大作战(七)--expo如何使用Genymotion模拟器

Expo大作战(八)--expo中的publish以及expo中的link，对link这块东西没有详细看，大家可以来和我交流

更多>>

接下来就开始撸码

---

启动屏（Splash screen）

启动屏幕（也称为启动屏幕）是用户在打开应用程序时看到的第一个屏幕，并且在加载应用程序时它仍然可见。通过使用AppLoading组件，您可以控制启动画面何时消失。

为您的应用自定义启动画面(Customize the splash screen for your app)

默认的初始屏幕是一个空白的白色屏幕。这可能对你有用，如果有的话，你很幸运！如果没有，你也很幸运，因为使用app.json和splash键很容易定制。我们来看看它。

制作一个启动图像
iOS人机界面Guidlindes列出静态启动图像大小。我将使用1242像素宽和2436像素高 - 这是iPhone 8 Plus（最宽iPhone）的宽度和iPhone X（最高iPhone）的高度。expo根据设备的大小为您调整图像大小，我们可以使用splash.resizeMode指定用于调整图像大小的策略。

Android屏幕尺寸因市场上各种各样的设备而异。解决这个问题的一个策略是查看最常见的解决方案并围绕这个解决方案进行设计 - 您可以在这里看到Unity发布的一些统计数据。鉴于我们可以自动调整大小和裁剪我们的splash 图像，只要我们不依赖精确匹配屏幕的splash 图像，我们可以坚持我们的尺寸。这很方便，因为我们可以在iOS和Android上使用一个splash 图像 - 。

如果你喜欢，你可以使用这个Sketch模板。我做了，我将背景颜色改为淡黄色，并在中间放了一张面条表情符号。值得注意的是，splash 图像支持透明度，尽管我们没有在这里使用它。

将图像导出为PNG并将其放入项目目录中。 我假设它在assets目录中并命名为splash.png。

splash.image

打开你的app.json并在“expo”字段中添加以下内容：

"splash": {
  "image": "./assets/splash.png"
}

现在重新打开expo客户端并打开您的应用程序，您将看到美丽的启动画面。 在显示之前可能会有延迟，请参阅下面的“环境之间的差异”以获取更多信息。

注意：需要关闭并重新打开iOS上的Expo客户端应用程序才能看到清单中启动画面的更改。 这是我们正在努力解决的一个已知问题。 在Android上，您需要按通知抽屉中的刷新按钮。

splash.backgroundColor

如果您为splash图像设置了白色以外的背景颜色，则可能会在其周围看到白色边框。 这是由于splash.resizeMode属性（我们稍后会讨论）和默认背景颜色，即#ffffff（白色）。 让我们通过将splash.backgroundColor设置为和我们的splash图像背景颜色相同来解决此

"splash": {
  "image": "./assets/splash.png",
  "backgroundColor": "#FEF9B0"
}

splash.resizeMode

您提供的任何splash图像都将调整大小以保持其宽高比并适合用户设备的分辨率。 有两种策略可用于调整大小：contain （默认）和cover。 在这两种情况下，splash图像都在启动屏幕内。 这些工作与React Native <Image>组件的resizeMode样式等价物相同，如下图所示。

将其应用于我们的noodle示例，让我们删除backgroundColor并尝试一下：

"splash": {
  "image": "./assets/splash.png",
  "resizeMode": "cover"
}

请注意，在最后一个示例中，我们拉伸图像以填充整个宽度，同时保持纵横比，所以面条表情符号最终比resizeMode设置为包含时更大。 如果你仍然不清楚包含和封面之间的区别，这篇博客文章正是描述了它们的含义。

自定义iOS和Android的配置

通过将配置嵌套在app.json中的android或ios密钥下（与您将如何为任一平台定制图标相同），可以基于每个平台配置任何启动选项。除此之外，某些配置选项仅适用于iOS或Android。

• 在iOS上，如果您想在iPad上显示不同的splash图像，可以设置ios.splash.tabletImage。
• 在Android上，您可以为不同的设备DPI设置启动图像，从ldpi到xxxhdpi。

使用AppLoading

只要AppLoading是您的应用程序中呈现的唯一组件，您的启动画面将保持可见状态。我们建议在缓存资产或从AsyncStorage获取任何数据以设置应用程序时使用AppLoading。阅读关于AppLoading的更多信息。

环境之间的差异

您的应用程序可以从Expo客户端或独立应用程序中打开，并且可以发布或开发。这些环境之间的启动屏幕行为略有不同。（仔细观察这组启动屏幕图片的不同）

• 在左边，我们正在使用expo客户端并加载一个目前正在开发的应用程序。 请注意，在启动画面的底部，您会看到一个信息栏，显示与准备JavaScript并将其下载到设备相关的信息。 在出现splash图像之前我们会看到一个橙色屏幕，因为背景颜色是立即设置的，但需要下载图像。
• 在中间，我们在expo客户端，我们正在加载已发布的应用程序。 请注意，该图像不会立即出现。
• 在右边，我们在一个独立的应用程序。 请注意，立即出现splash图像

由此得出结论，独立引用程序图像加载效果更好

分离的ExpoKit应用程序

如果您在iOS上运行exp detach，并且您的应用程序已经使用splash API，则生成的ExpoKit项目将包含为您的应用程序正确配置的Interface Builder启动屏幕文件。在此之后，如果您想更改应用的启动画面，请直接编辑Interface Builder文件。

对于在不使用splash API的情况下运行exp分离的用户，我们在EXShell plist（iOS）中添加isSplashScreenDisabled: YES。如果您以后决定在分离的iOS项目中使用启动画面，请将名为LaunchScreen的界面生成器文件添加到您的Xcode项目中，并从plist中删除此项。

已知的问题

我们知道以下情况，并且很快就会解决。

• iOS初始屏幕状态栏在独立应用程序中为白色，但在Expo客户端为黑色。默认情况下，它在独立应用程序中应该很暗，也应该可以自定义。
• 在iOS上需要关闭并重新打开Expo客户端才能看到启动画面的更改。

从加载API迁移(Migrating from the loading API)

加载API从SDK 22开始已被弃用，并且严重恶化了用户体验，所以我们建议您尽快更换以便尽快投放 - 加载API将被移除以支持SDK 25中的splash。(这是一个更新说明)

---

---

下一张继续介绍，这一篇主要介绍了：expo中splash启动页的详细机制， 欢迎大家关注我的微信公众号，这篇文章是否被大家认可，我的衡量标准就是公众号粉丝增长人数。欢迎大家转载，但必须保留本人博客链接！