ios xcode 电容器故事板约束以停止状态栏挂在 web 视图的顶部

Posted 2023-02-23

【中文标题】ios xcode 电容器故事板约束以停止状态栏挂在 web 视图的顶部

【英文标题】：ios xcode capacitorjs storyboard constraint to stop status bar hanging over the top of the webview

【发布时间】：2021-07-31 16:44:44

【问题描述】：

xcode - webview content is showing in status bar

在这篇文章中，它暗示要确保状态栏不在 webview 上方，即在电容器的情况下，应用程序，您应该向情节提要添加约束。

但是，在我的 xcode（最新）中，电容器“桥视图控制器”的情节提要不允许我应用约束。所有选项都显示为灰色：

但是，我无法弄清楚如何让 ios 状态栏不位于应用程序的顶部，并且所有旧的 Cordova 和 ionic 方法似乎都不起作用。

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

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

【参考方案1】：

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

你应该做的就是在你的 index.html 中添加这个视口元标记<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 并在env() CSS 函数和预定义的环境变量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"

【讨论】：

我尝试使用配置选项，但它没有改变任何东西 - 根据环境添加填充主体，但也许我遗漏了一些东西。当用户向下滚动页面时，文本会移到状态栏后面。

这是一个演示github.com/j-d-carmichael/capacitor-demo

配置选项适用于当应用程序不滚动到状态栏后面，但演示应用程序滚动到状态栏后面，因此您不能对该应用程序使用该选项。在你的情况下，我会推荐一个固定的“标题”，它使用 env 变量并隐藏它后面的可滚动内容

啊，我明白了 - 我认为电容器的解决方案会更强大，黑客攻击更少

所有购物和列表应用程序都这样做:)。 Cordova 通过他们的状态栏管理这个，并确保网站的窗口没有进入状态栏。如果电容器提供更多的控制来约束 xcode 中的视图而不是破解它，那将会容易得多。

【参考方案2】：

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

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

【讨论】：

好的，谢谢，我会看看能不能找到这个——只是为了确认一下，这将是 UIView 故事板，对吧？

【参考方案3】：

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

"ios": 
      "contentInset": "always"
  

更新：

但是，在我的 xcode（最新）中，电容器“桥”的情节提要 视图控制器”不允许我应用约束..所有 选项显示为灰色：

“Add New Constraints” checkboxes and fields are disabled

【讨论】：

我试图添加这个，但无论我做什么，文本总是在状态栏下移动，看起来很糟糕。这是一个虚拟的 vue 应用 poc。 github.com/j-d-carmichael/capacitor-demo

不幸的是，所有链接似乎都不适用于最新的 xcode 和电容器js，但仍然感谢。