ios xcode capacitorjs storyboard constraint to stop status bar hanging over the top of the webview

Question

在这个 post 中，它暗示要确保状态栏不会位于 webview 之上，即在 capacitorjs 的应用程序中，您应该向情节提要添加约束。

然而，在我的xcode（最新）中，电容器“Bridge view controller”的故事板不允许我应用约束。所有选项都显示为灰色：

但是，我不知道如何让 ios 状态栏不位于应用程序的顶部，而且所有旧的 Cordova 和离子方法似乎都不起作用。

无论我做什么，状态栏都会交出 webview..

有任何想法或 ios/capacitor js 专家可以提供帮助吗？

Answer 1

我不熟悉 Capacitor，但作为一名 iOS 开发人员，View Controller 不是可视元素，因此它不能有约束。

您需要想出一种方法来访问 Capacitor 中的 UIView，然后对视图应用约束。

Answer 2

Capacitor 使用单个 ViewController，其中唯一的视图是全屏的 WKWebView，因此您不能向其添加任何约束。

你应该做的是避免缺口是将此视口元标记 <meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 添加到你的 index.html 并在 env() [=27= 的帮助下尊重安全区域] 函数和预定义环境变量 safe-area-inset-left、safe-area-inset-right、safe-area-inset-top 和 safe-area-inset-bottom，如 Apple 在 this article

上所述

如果您的应用无法滚动并且您不想自己处理安全区域，您也可以将视口元标记设置为 <meta name='viewport' content='initial-scale=1, viewport-fit=contain'> 并将其添加到 capacitor.config.json

"ios": {
    "contentInset": "always"
}

Answer 3

将此添加到 capacitor.config.json 以获得旧行为。（有移动可能值）

"ios": {
      "contentInset": "always"
  }

更新：

However, in my xcode (latest), the storyboard for capacitor "Bridge view controller" does not allow me to apply constraints.. all the options are greyed out:

“Add New Constraints” checkboxes and fields are disabled

ios xcode capacitorjs storyboard constraint to stop status bar hanging over the top of the webview

ios xcode capacitorjs storyboard constraint to stop status bar hanging over the top of the webview

xcode

ios

swift

capacitor