如何解决Ionic + Capacitor 3 + Android 短暂显示扭曲的飞溅图像 问题背景信息解决方案
如果您使用 @capacitor/splash-screen API 在带有 Capacitor 3 的 Ionic Android 应用程序中显示启动画面,您可能会遇到此问题:
问题
在几分之一秒内,启动图像会失真,直到以正确的纵横比显示。这意味着它也会在屏幕上“跳跃”一点,如果您在设备处于横向方向时启动应用程序,或者您的设备已拉伸或显示宽高比,这一点尤其明显。
背景信息
发生这种情况是因为在应用启动时为 AppTheme.NoActionBarLaunch
使用的 MainActivity
设置为将初始图像作为背景图像,但“真实”初始图像在几毫秒后被初始化在插件的 SplasScreen.buildViews()
方法中。
解决方案
要修复它,您可以在 styles.xml
下的 /android/app/src/main/values
文件中更改以下内容:
旧:
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
<item name="android:background">@drawable/splash</item>
</style>
新(无背景):
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
<item name="android:background">@null</item>
</style>
或者设置启动画面的背景颜色:
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
<item name="android:background">#ffffff</item>
</style>
这将防止在将实际 ImageView 添加到视图层次结构之前将启动图像显示为背景图像。 ImageView 将具有插件配置的 androidScaleType
中定义的正确 scaleType。
已使用以下版本进行测试:
- @capacitor/android: 3.0.0-rc.0
- @capacitor/splash-screen: 0.3.6
- @ionic/angular: 5.6.3
使用如下配置:
const config: CapacitorConfig = {
// ...
plugins: {
SplashScreen: {
launchShowDuration: 3000,launchAutoHide: false,backgroundColor: '#ffffffff',androidSplashResourceName: 'splash',androidScaleType: 'CENTER_CROP',showSpinner: false,splashFullScreen: false,splashImmersive: false,},// ...
};
注意:无需在 TypeScript (Ionic) 代码中调用 SplashScreen.show()
,它会自动显示。一旦您想隐藏启动画面,只需在您的 TypeScript 代码中调用 SplashScreen.hide()
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。