在 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，然后像这样将您的网址（通常为http://localhost:3000/，可能根据您的设置而有所不同）指定为load in the 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 添加异常。为此，open info.plist as source code 并粘贴以下内容，

<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 应用了。

Answer 2

您可以在没有服务器的情况下运行本地 React 应用程序。只需使用功能 WkWebView.loadFileURL(url, allowingReadAccessTo: url) 。您可以在answer 中查看将 React 应用文件添加到 xcode 项目的详细步骤。

记得通过在 package.json 中设置 "homepage": "./" 来配置您的 React 应用以使用相对路径。