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

Question

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

---

跟进

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

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

为什么是最好的？

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

Answer 1

你不一定需要构建 react app，然后在本地加载这些文件。它可以工作，但更好的方法是启动本地服务器，即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的应用程序传输安全将阻止它。它只允许通过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应用程序。

Answer 2

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

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