WKWebView 不显示导航栏

Question

我在 SwiftUI 中有一个显示 WKWebView 的视图，它使用 UIViewControllerRepresentable class 传递到主 ContentView，按照 Paul Huson's 'Creating a simple browser with WKWebView 的说明实现。但是，当我在模拟器中加载应用程序时，似乎没有导航栏。

这是我的代码：

ContentView和BrowserView

struct ContentView: View {

    let browserView = BrowserView()
    var body: some View {
        browserView
    }
}

struct BrowserView: UIViewControllerRepresentable {

    func makeUIViewController(context: UIViewControllerRepresentableContext<BrowserView>) -> WKBrowser {
        let browser = WKBrowser()
        return browser
    }

    func updateUIViewController(_ uiViewController: WKBrowser, context: UIViewControllerRepresentableContext<BrowserView>) {
        // Empty
    }

}

WKBrowser class

class WKBrowser: UIViewController, WKNavigationDelegate {

    var webView: WKWebView!

    var webURL = URL(string: "https://www.hackingwithswift.com")!

    override func loadView() {
        webView = WKWebView()
        webView?.navigationDelegate = self
        self.view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        webView.load(URLRequest(url: webURL))
    }
}

结果：

与教程中具有导航栏的 WKWebView 相比，如下所示：

我必须添加或编辑什么才能确保显示导航栏？

编辑 2020 年 5 月 19 日：

我想通过 navigationItem.rightBarItem 功能将项目添加到导航栏，添加到 viewDidLoad，像这样：

override func viewDidLoad() {
    super.viewDidLoad()
    webView.load(URLRequest(url: webURL))
    navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Open", style: .plain, target: self, action: #selector(someFunction)
}

@objc func someFunction(){
    // Do something
}

最佳情况下，结果看起来类似于 SFSafariViewController:

但是当我将 UIViewRepresentable class 包裹在 NavigationView 中时，这些项目不会添加到出现的导航栏中，而是得到这个：

Answer 1

如果您想在 UIKit 部分使用导航栏，则需要将 UIKit 浏览器包装在 UINavigationController 中，如下所示

测试 Xcode 11.4 / iOS 13.4

struct BrowserView: UIViewControllerRepresentable {

    func makeUIViewController(context: Context) -> UINavigationController {
        let browser = WKBrowser()
        return UINavigationController(rootViewController: browser)
    }

    func updateUIViewController(_ uiViewController: UINavigationController, context: Context) {
        // Empty
    }

}

Answer 2

我正在使用 Xcode 14，同时遵循相同的教程。嵌入导航控制器解决了问题，而无需更改教程中的任何代码。

Answer 3

其实你有更简单的方法

首先包装一个网络视图：

struct WebView: UIViewRepresentable {
    var url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

然后您可以将 WebView 放入 VStack，这将使 UIView 像 SwiftUI 组件一样。一切正常！

   var body: some View {
        NavigationView {
            VStack {
                WebView(url: someURL)
            }
            .toolbar {
               // buttons here ....
            }
        }
   }

太棒了！

WKWebView 不显示导航栏

WKWebView not showing Navigation Bar

ios

swift

wkwebview

swiftui