当前位置：首页 > React

react的页面如何嵌入ios

2026-01-25 17:24:14React

在iOS应用中嵌入React页面

React Native可以用于构建原生iOS应用，但若已有React网页应用并希望嵌入到iOS应用中，可通过WebView实现。以下是具体方法：

使用WKWebView嵌入React页面

在iOS原生应用中，通过WKWebView加载React网页是最直接的方式。WKWebView是Apple推荐的WebView组件，性能优于UIWebView。

import WebKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let webView = WKWebView(frame: view.frame)
        view.addSubview(webView)

        if let url = URL(string: "https://your-react-app.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
}

确保在Info.plist中允许网络请求：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

使用React Native WebView组件

若iOS应用本身是React Native开发，可直接使用react-native-webview加载React页面：

import React from 'react';
import {WebView} from 'react-native-webview';

const App = () => {
  return (
    <WebView 
      source={{uri: 'https://your-react-app.com'}}
      style={{flex: 1}}
    />
  );
};

export default App;

安装依赖：

npm install react-native-webview
cd ios && pod install

通信机制（Web与Native交互）

通过WebView的postMessage和事件监听实现双向通信：

iOS原生代码（WKWebView）：

webView.configuration.userContentController.add(self, name: "nativeListener")

// 向Web发送消息
webView.evaluateJavaScript("window.reactAppMessage('Hello from iOS')")

// 接收Web消息
extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print("Received message from web: \(message.body)")
    }
}

React页面代码：

window.webkit.messageHandlers.nativeListener.postMessage("Hello from React");

// 接收Native消息
window.reactAppMessage = (message) => {
  console.log(message);
};

优化加载性能

预加载WebView：在应用启动时初始化隐藏的WebView，后续快速显示。

离线支持：若React应用是静态资源，可打包到iOS项目中：

if let path = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "ReactApp") {
    let url = URL(fileURLWithPath: path)
    webView.loadFileURL(url, allowingReadAccessTo: url.deletingLastPathComponent())
}