React Native设置Swift WebView的url时出现setUrl未识别选择器错误

错误原因解析 #

这个错误的核心是：React Native尝试调用setUrl:方法，但目标对象是SwiftUI的_UIHostingView类实例——该类并未暴露这个方法，导致选择器无法识别。你之前添加的@objc(setUrl:)大概率加错了位置（比如加到了SwiftUI视图结构体上），而React Native原生模块的方法必须定义在RCTViewManager子类中，才能被正确调用。

分步修复方案 #

1. 修正WebViewManager.swift，确保方法定义在Manager类中

Manager作为RN与原生视图的桥梁，需持有SwiftUI HostingController实例，并通过它更新WebView的@Published变量：

import React
import SwiftUI

class WebViewManager: RCTViewManager {
    // 持有HostingController，用于后续更新SwiftUI视图状态
    private var hostingController: UIHostingController<WebView>?
    
    override func view() -> UIView! {
        let webViewSwiftUI = WebView()
        let hostingController = UIHostingController(rootView: webViewSwiftUI)
        self.hostingController = hostingController
        return hostingController.view
    }

    // 暴露给RN的setUrl方法，必须加@objc修饰
    @objc func setUrl(_ urlString: String) {
        // SwiftUI状态更新必须在主线程
        DispatchQueue.main.async { [weak self] in
            guard let url = URL(string: urlString) else { return }
            self?.hostingController?.rootView.url = url
        }
    }

    override static func requiresMainQueueSetup() -> Bool {
        return true
    }

    override class func moduleName() -> String! {
        return "WebViewManager"
    }
}

2. 调整SwiftUI WebView实现，确保@Published变量可被外部更新

注意：SwiftUI结构体不能直接暴露@objc方法，只需保持@Published变量的可访问性即可：

import SwiftUI
import WebKit

struct WebView: View {
    @Published var url: URL?

    var body: some View {
        if let url = url {
            WebKitWrapper(url: url)
        } else {
            EmptyView()
        }
    }

    // 封装WKWebView的UIViewRepresentable
    struct WebKitWrapper: UIViewRepresentable {
        let url: URL

        func makeUIView(context: Context) -> WKWebView {
            WKWebView()
        }

        func updateUIView(_ uiView: WKWebView, context: Context) {
            // url变化时重新加载请求
            let request = URLRequest(url: url)
            uiView.load(request)
        }
    }
}

3. 确保桥接与RN端调用正确

• 桥接文件（如YourApp-Bridging-Header.h）需包含RN头文件：

  #import <React/RCTViewManager.h>
  

• RN端组件调用示例：

  import { requireNativeComponent } from 'react-native';
  
  const WebViewNative = requireNativeComponent('WebViewManager');
  
  // 使用组件时保存引用
  class CustomWebView extends React.Component {
      webViewRef = null;
  
      setUrl = (url) => {
          this.webViewRef?.setUrl(url);
      };
  
      render() {
          return <WebViewNative ref={ref => this.webViewRef = ref} />;
      }
  }
  

关键注意事项 #

• 主线程更新：SwiftUI的状态更新必须在主线程执行，否则会导致UI异常。
• 方法归属：RN原生模块的方法必须定义在RCTViewManager子类中，不能直接加到SwiftUI视图结构体上（结构体无法兼容Objective-C的消息传递机制）。
• 名称一致性：moduleName()返回的字符串必须与RN端requireNativeComponent传入的名称完全匹配。

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