在 WKWebView iOS 中加载本地 React 应用程序

Question

我已经在 React 中构建了一个站点，并且想要使用 iOS WKWebView 中的构建文件。

---

跟进

为了运行一个 React 构建文件夹，它必须被提供，所以目前实现这一目标的唯一方法是在 iOS 应用程序中构建一个服务器，提供 React 构建文件，并在 WKWebView 中加载本地 url。

我为服务器找到的最佳选择是 https://criollo.io/#getting-started。

为什么是最好的？

• 适用于 Objective-C 和 Swift 代码库
• 易于使用的文档
• 开发商的大力支持

Answer 1

您不一定需要构建 react 应用程序，然后在本地加载这些文件。它可以工作，但更好的方法是启动您的本地服务器，即yarn start，然后指定您的 url（通常为http://localhost:3000/，可能会根据您的设置而有所不同）以这样加载 WKWebView，

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let configuration = WKWebViewConfiguration()
        // (optional) your configuration 
        webView = WKWebView(frame: .zero, configuration:configuration)
        view = webView

        let url = URL(string: "http://localhost:3000")!
        let request = URLRequest(url: url)
        webView.load(request)
    }

由于您的服务器通过 加载文件http，iOS 的App Transport Security会阻止它。它只允许通过https协议加载文件。为了让ATS负载通过http你需要添加例外localhost或127.0.0.1或其他任何地方IPADDR你的服务器上运行。为此，请作为源代码打开info.plist并粘贴以下内容，

<key>NSAppTransportSecurity</key>  
<dict>  
    <key>NSExceptionDomains</key>  
    <dict>  
        <key>127.0.0.1</key>  
        <dict>  
            <key>NSExceptionAllowsInsecureHTTPLoads</key>  
            <true/>  
        </dict>  
        <key>localhost</key>  
        <dict>  
            <key>NSExceptionAllowsInsecureHTTPLoads</key>  
            <true/>  
        </dict>  
    </dict>  
</dict> 

现在您应该能够在 WKWebView 中访问您的 React 应用程序。