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/，具体取决于您的设置）为{{3} }，

    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的load in the WKWebView将阻止该文件。它仅允许通过https协议加载文件。为了允许通过http加载ATS，您需要为localhost或127.0.0.1或运行服务器的任何本地ipaddr添加例外。为此，App Transport Security并粘贴以下内容，

<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项目中的详细步骤。

通过在"homepage": "./"中设置package.json，记住将React应用配置为使用相对路径。

在WKWebView iOS中加载本地React应用

2 个答案: