Ionic ios 电容器启动画面工作,但无法添加图像
Ionic ios capacitor splash screen working, but unable to add images
我正在尝试使用离子电容器显示自定义启动画面。我遵循了闪屏文档并使其适用于一般颜色背景。但是当我尝试添加图像时,它不起作用。这是我的代码:
capacitor.config.json:
"SplashScreen": {
"launchShowDuration": 2000,
"launchAutoHide": false,
"backgroundColor": "#00FF00",
"androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP",
"showSpinner": false,
"androidSpinnerStyle": "large",
"iosSpinnerStyle": "small",
"spinnerColor": "#999999",
"splashFullScreen": true,
"splashImmersive": true,
"layoutName": "launch_screen",
"useDialog": true
},
app.component.ts:
console.log('waiting starts!')
SplashScreen.show({
showDuration: 2000,
autoHide: true
});
this.platform.ready().then(async() =>
{
console.log('waiting ends')
SplashScreen.hide()
StatusBar.setStyle({style:Style.Default});
...
来源:https://capacitorjs.com/docs/apis/splash-screen
在我的 json 文件中,我将屏幕设置为绿色(使用 backgroundColor
参数),这有效:
但我无法使用此文档使初始图像正常工作:https://capacitorjs.com/docs/guides/splash-screens-and-icons。这是我当前的设置:
并且在遵循本教程 (https://www.joshmorony.com/adding-icons-splash-screens-launch-images-to-capacitor-projects/) 和 运行 cordova-res ios --skip-config --copy
之后它不起作用。有谁知道出了什么问题?我认为这可能与我的启动屏幕故事板有关。在项目的早期,其他人弄乱了它,所以现在它看起来像这样:
注意:我用于初始屏幕的测试图像只是蓝色 canvas,所以如果有人想知道的话,这就是初始资产上的内容。
首先,安装cordova-res:
npm install -g cordova-res
cordova-res 需要一个类似 Cordova 的结构:将一个图标和一个启动画面文件放在项目的顶级 resources 文件夹中,如下所示:
资源/
├── icon.png
└── splash.png
接下来,运行以下生成所有图像,然后将它们复制到本机项目中:
cordova-res ios --skip-config --copy
cordova-res android --skip-config --copy
resources/icon.(png|jpg) 必须至少为 1024×1024px
resources/splash.(png|jpg) 必须至少为 2732×2732px
在 iOS 上,Splash 插件使用配置的 Launch Storyboard(默认情况下 LaunchScreen.storyboard
),因此如果您弄乱了它,这可能是它不再工作的原因。
它应该包含一个加载 Splash.png 图像的 ImageView。
好吧,你真的不需要显示图像,无论你添加什么都会显示,图像,文本。
在 Android 上,当您配置 layoutName
时,它将使用您在名为 launch_screen.xml
的布局中拥有的任何内容,而不是图像。
我正在尝试使用离子电容器显示自定义启动画面。我遵循了闪屏文档并使其适用于一般颜色背景。但是当我尝试添加图像时,它不起作用。这是我的代码:
capacitor.config.json:
"SplashScreen": {
"launchShowDuration": 2000,
"launchAutoHide": false,
"backgroundColor": "#00FF00",
"androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP",
"showSpinner": false,
"androidSpinnerStyle": "large",
"iosSpinnerStyle": "small",
"spinnerColor": "#999999",
"splashFullScreen": true,
"splashImmersive": true,
"layoutName": "launch_screen",
"useDialog": true
},
app.component.ts:
console.log('waiting starts!')
SplashScreen.show({
showDuration: 2000,
autoHide: true
});
this.platform.ready().then(async() =>
{
console.log('waiting ends')
SplashScreen.hide()
StatusBar.setStyle({style:Style.Default});
...
来源:https://capacitorjs.com/docs/apis/splash-screen
在我的 json 文件中,我将屏幕设置为绿色(使用 backgroundColor
参数),这有效:
但我无法使用此文档使初始图像正常工作:https://capacitorjs.com/docs/guides/splash-screens-and-icons。这是我当前的设置:
并且在遵循本教程 (https://www.joshmorony.com/adding-icons-splash-screens-launch-images-to-capacitor-projects/) 和 运行 cordova-res ios --skip-config --copy
之后它不起作用。有谁知道出了什么问题?我认为这可能与我的启动屏幕故事板有关。在项目的早期,其他人弄乱了它,所以现在它看起来像这样:
注意:我用于初始屏幕的测试图像只是蓝色 canvas,所以如果有人想知道的话,这就是初始资产上的内容。
首先,安装cordova-res:
npm install -g cordova-res
cordova-res 需要一个类似 Cordova 的结构:将一个图标和一个启动画面文件放在项目的顶级 resources 文件夹中,如下所示:
资源/
├── icon.png
└── splash.png
接下来,运行以下生成所有图像,然后将它们复制到本机项目中:
cordova-res ios --skip-config --copy
cordova-res android --skip-config --copy
resources/icon.(png|jpg) 必须至少为 1024×1024px
resources/splash.(png|jpg) 必须至少为 2732×2732px
在 iOS 上,Splash 插件使用配置的 Launch Storyboard(默认情况下 LaunchScreen.storyboard
),因此如果您弄乱了它,这可能是它不再工作的原因。
它应该包含一个加载 Splash.png 图像的 ImageView。
好吧,你真的不需要显示图像,无论你添加什么都会显示,图像,文本。
在 Android 上,当您配置 layoutName
时,它将使用您在名为 launch_screen.xml
的布局中拥有的任何内容,而不是图像。