如何使用本机博览会在启动画面上播放介绍动画？

Question

目前,如果我向app.json添加.gif文件,它将无效

"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(由Expo提供)组件,它具有我们的gif图像的面,在后台它的工作方式类似于AppLoading,即获取数据和缓存.我们使用静态png图像作为默认的启动画面,静态图像到gif之间的转换为我们工作.

这是最简单的方法,但有一个缺点,即在静态闪屏和动画之间有短时间可见的白色屏幕.这是因为您的javascript包正在后台下载,直到除非您的整个JS没有加载,否则您将看到一个白色屏幕.

• 要解决这个问题,您需要分离您的expo应用程序,因为我们将进行一些本机更改.
• 安装并按照本模块中的说明进行操作.这个模块的好处是它暴露了javascript中的'hide'功能.

App的基本流程.

• App loading start =>静态启动画面可见
• 屏幕可见,直到我们的javascript包未加载
• Bundle loads =>由SplashScreen组件的ComponentDidMount上的模块公开的call hide函数
• Static Splash屏幕隐藏=>动画启动画面可见,后台任务正常工作(缓存和API调用)
• 进一步的App流程

Answer 2

如果您正在谈论启动屏幕并且您没有使用create-react-native-app,则必须编辑每个平台的本机启动屏幕以使用您的动画.

如果您正在使用create-react-native-appExpo,那么您可以查看Splash Screen API.