Capacitor-JS 状态栏在 IOS 中重叠

Question

我正在使用带有电容器的 NuxtJS。当我们滚动时，IOS 设备上的顶部状态栏会重叠。我还在电容器.config.json 中添加了

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

。

尽管我还包含了 CSS，但它在顶部创建了额外的空间。

body {
   padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
     env(safe-area-inset-left);
 }

Answer 1

这可以通过在 CAPViewBridgeController 文件中添加以下行来实现

webView?.frame.origin = CGPoint(x: 0, y: UIApplication.shared.statusBarFrame.size.height)

webView?.frame.size.height = UIScreen.main.bounds.size.height - UIApplication.shared.statusBarFrame.size.height;

搜索以下功能并更新。该函数应该如下所示

extension CAPBridgeViewController: CAPBridgeDelegate {
    internal var bridgedWebView: WKWebView? {
        webView?.frame.origin = CGPoint(x: 0, y: UIApplication.shared.statusBarFrame.size.height)
        webView?.frame.size.height = UIScreen.main.bounds.size.height - UIApplication.shared.statusBarFrame.size.height;
        return webView
    }

    internal var bridgedViewController: UIViewController? {
        return self
    }
}

Answer 2

我浪费了太多时间来解决这个问题。 viewport、inset、safe-area-inset 等...我已经阅读了在 google 和 bing 上可以找到的大部分解决方案。 而且它们都毫无用处。

骂完我的commit message后，我没有预期地尝试修改ios原生源码。 然后效果出奇的好。

应用以下位于 CAPBridgeViewController.swift 文件底部的源代码。

extension CAPBridgeViewController: CAPBridgeDelegate {
    internal var bridgedWebView: WKWebView? {
        let window = UIApplication.shared.windows.filter {$0.isKeyWindow}.first;
        let bottomPadding = window?.safeAreaInsets.bottom ?? 0;
        let height = window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0;
        webView?.frame.origin = CGPoint(x: 0, y: height)
        webView?.frame.size.height = UIScreen.main.bounds.size.height - height - bottomPadding;
        return webView
    }

    internal var bridgedViewController: UIViewController? {
        return self
    }
}

Answer 3

感谢之前的回答，它也对我有用。但是出现了一个问题，在刘海屏 iPhone 上使用 UIStatusBarStyleDarkContent 时，statusBar 的背景总是黑色（Iphone X 以下的机型都可以）。

对状态栏上的静态背景颜色进行一些更改后，现在一切都很完美。 对于我的情况，我将背景设置为白色，因为我的粘性标题也是白色的。但您可以通过下面的代码更改苹果用户界面上的任何其他颜色。

extension CAPBridgeViewController: CAPBridgeDelegate {
    public var bridgedWebView: WKWebView? {
        if let webView = webView {
            if #available(iOS 13.0, *) {
                let statusBar = UIView(frame: UIApplication.shared.keyWindow?.windowScene?.statusBarManager?.statusBarFrame ?? CGRect.zero)
                statusBar.backgroundColor = UIColor.white // Replace with your color
                UIApplication.shared.keyWindow?.addSubview(statusBar)
            } else {
                if let statusBar = UIApplication.shared.value(forKey: "statusBar") as? UIView {
                    statusBar.backgroundColor = UIColor.white // Replace with your color
                }
            }
            
            webView.frame.origin = CGPoint(x: 0, y: UIApplication.shared.statusBarFrame.size.height)
            webView.frame.size.height = UIScreen.main.bounds.size.height - UIApplication.shared.statusBarFrame.size.height
            
            return webView
        }
        
        return nil
    }
    
    public var bridgedViewController: UIViewController? {
        return self
    }
}

结果：

注意：如果您不知道如何应用此更改； 按照 Xcode -> pods ->development pods ->capacitor ->CAPBridgeViewController ，更改代码然后执行

npx patch-package @capacitor/ios

。我在电容器 v5 上这样做了，但如果您仍在使用它，其他版本的封装名称可以直接是电容器。