如何使用 React Native Expo 在启动画面上播放介绍动画？

Question

目前，如果我将 .gif 添加到 app.json，它不起作用

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

编辑：看起来，他们目前正在处理它，在这里：(https://expo.canny.io/feature-requests/p/improved-splash-screen-api).

Answer 1

如果您谈论的是启动屏幕并且您没有使用 create-react-native-app，则每个平台必须 edit the native launch screen 才能使用您的动画。

如果您在 Expo 中使用 create-react-native-app，那么您可以查看 Splash Screen API。

Answer 2

Expo 团队已完成："Improved Splash Screen API" 票。所以现在，您可以按照他们的文档中的说明进行操作：https://docs.expo.io/versions/v29.0.0/sdk/splash-screen/!

Answer 3

我看到您正在尝试将 gif 用作启动画面。好吧，我有一个坏消息。本机平台 (iOS & Android) 的启动画面 API 不支持 gif，事实上它们只支持 'png' 图片。

但是，好消息是有解决办法。

我们在项目中有类似的要求，因此我们创建了自定义 AppLoading (Provided by Expo) 组件，该组件具有我们的 gif 图像的表面，并且在后台工作类似于 AppLoading，即获取数据和缓存。我们为默认初始屏幕使用静态 png 图像，静态图像到 gif 之间的转换对我们很有效。

这是最简单的方法，但有一个缺点，即在静态启动画面和动画画面之间存在短时间可见的白屏。发生这种情况是因为您的 javascript 包正在后台下载，除非您的整个 JS 没有加载，否则您将看到一个白屏。

为了克服这个问题，您需要分离您的 expo 应用程序，因为我们将进行一些本机更改。
安装并按照 module 中的说明进行操作。这个模块的好处是它在 javascript.

App的基本流程

应用加载开始 => 静态启动画面可见
屏幕可见，直到我们的 javascript 包未加载
Bundle 加载 => 在 SplashScreen 组件的 ComponentDidMount 上调用模块公开的隐藏函数
静态启动画面隐藏 => 动画启动画面在后台任务工作时可见（缓存和 API 调用）
进一步的应用流程

Answer 4

Expo 自版本 29 起支持动画 SVG 和 GIF。它还提供了一个 API 来生成您自己的启动画面，而无需 AppLoading。

请检查：https://docs.expo.io/versions/v29.0.0/sdk/splash-screen#example-without-apploading

如何使用 React Native Expo 在启动画面上播放介绍动画？

How to play an intro animation on splash screen with react native expo?

react-native

expo

App的基本流程