Ionic ios 电容器启动画面工作，但无法添加图像

Question

我正在尝试使用离子电容器显示自定义启动画面。我遵循了闪屏文档并使其适用于一般颜色背景。但是当我尝试添加图像时，它不起作用。这是我的代码：

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，所以如果有人想知道的话，这就是初始资产上的内容。

Answer 1

首先，安装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

Answer 2

在 iOS 上，Splash 插件使用配置的 Launch Storyboard（默认情况下 LaunchScreen.storyboard），因此如果您弄乱了它，这可能是它不再工作的原因。它应该包含一个加载 Splash.png 图像的 ImageView。好吧，你真的不需要显示图像，无论你添加什么都会显示，图像，文本。

在 Android 上，当您配置 layoutName 时，它将使用您在名为 launch_screen.xml 的布局中拥有的任何内容，而不是图像。

Ionic ios 电容器启动画面工作，但无法添加图像

Ionic ios capacitor splash screen working, but unable to add images

ios

angular

splash-screen

capacitor