react-native - 如何使用 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

我看到您正在尝试将 gif 用于启动画面。好吧，我有一个坏消息。原生平台(iOS 和 Android)的闪屏 API 不支持 gif，事实上它们只支持 'png' 图像。
但是，好消息是有一个解决方法。
我们在项目中有类似的要求，所以我们创建了自定义 AppLoading (Provided by Expo)该组件具有我们的 gif 图像的面孔，并且在后台它的工作方式类似于 AppLoading，即获取数据和缓存。我们使用静态 png 图像作为默认启动画面，静态图像到 gif 之间的转换对我们有用。
这是最简单的方法，但有一个缺点，即在静态启动屏幕和动画之间，会在短时间内出现白屏。
发生这种情况是因为您的 javascript 包正在后台下载，并且除非您的整个 JS 没有加载，否则您将看到一个白屏。

为了克服这个问题，您需要分离您的 expo 应用程序，因为我们将进行一些 native 更改。

安装并按照 module 中的说明进行操作.
这个模块的好处是它在 javascript 中公开了“隐藏”功能。

应用程序的基本流程。

应用加载开始 => 静态闪屏可见

在我们的 javascript 包未加载之前，屏幕是可见的

捆绑加载 => 调用 SplashScreen 组件的 ComponentDidMount 上的模块公开的隐藏函数

静态启动画面隐藏 => 动画启动画面在后台任务工作时可见(缓存和 API 调用)

更多应用流程