能否将React.js应用集成至现有原生iOS项目？Podfile报错求方案

首先明确你报错的原因：你套用了React Native的集成流程，但你的项目是React.js，根本没有安装react-native依赖，所以Podfile里尝试加载React Native的pod脚本自然找不到——React.js是纯Web框架，和React Native的集成逻辑完全不同，走React Native的步骤从一开始就错了。

下面是两种实用的集成方式：

1. 直接用WKWebView加载React.js打包后的静态资源 #

这是最基础、最常用的方式，步骤如下：

• 在你的React.js项目根目录执行npm run build，生成build文件夹，里面包含打包好的静态HTML、JS、CSS和资源文件
• 把build文件夹整个拖进iOS Xcode项目，勾选「Copy items if needed」，并确保添加到你的App target中
• 在iOS原生代码中创建WKWebView，加载本地的index.html：

  import WebKit
  
  class ReactWebViewController: UIViewController, WKNavigationDelegate {
      private var webView: WKWebView!
  
      override func viewDidLoad() {
          super.viewDidLoad()
          let webConfig = WKWebViewConfiguration()
          webView = WKWebView(frame: view.bounds, configuration: webConfig)
          webView.navigationDelegate = self
          view.addSubview(webView)
  
          // 定位到本地打包的index.html文件
          guard let htmlPath = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "build") else {
              print("找不到React静态资源")
              return
          }
          let htmlURL = URL(fileURLWithPath: htmlPath)
          webView.loadFileURL(htmlURL, allowingReadAccessTo: htmlURL.deletingLastPathComponent())
      }
  }
  

• 注意：如果你的React.js项目用了前端路由（比如react-router），要把BrowserRouter改成HashRouter，否则本地加载会出现路径匹配失败的问题。

2. 实现原生与React.js的双向通信（JSBridge） #

如果需要原生和React.js页面交互（比如原生调用React方法、React触发原生功能），可以在上面的WebView基础上实现JSBridge：

原生给React发消息 #

// 在需要发送消息的地方调用
let message = "来自iOS原生的消息"
webView.evaluateJavaScript("window.handleNativeMessage('\(message)')") { result, error in
    if let err = error {
        print("调用JS方法失败：\(err)")
    }
}

React端监听：

window.handleNativeMessage = (message) => {
    console.log("收到原生消息：", message);
    // 这里写React的处理逻辑
};

React给原生发消息 #

先在iOS端注册消息处理器：

class ReactWebViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler {
    override func viewDidLoad() {
        super.viewDidLoad()
        let webConfig = WKWebViewConfiguration()
        // 注册名为"reactNativeBridge"的消息通道
        webConfig.userContentController.add(self, name: "reactNativeBridge")
        webView = WKWebView(frame: view.bounds, configuration: webConfig)
        // ... 其他初始化代码
    }

    // 接收React发来的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "reactNativeBridge" {
            let data = message.body
            print("收到React消息：\(data)")
            // 原生处理逻辑
        }
    }
}

React端发送消息：

window.webkit.messageHandlers.reactNativeBridge.postMessage({
    type: "nativeAction",
    data: "需要传给原生的数据"
});

内容的提问来源于stack exchange，提问作者marchellideaslab