兼容android

使用的库是 react-native-webview

// 注入的 JavaScript 代码，用于监听 SPA 路由变化
  const injectedJavaScript = `
    (function() {
      function sendTitle(title) {
        window.ReactNativeWebView.postMessage(JSON.stringify({
          type: 'title',
          title: title
        }));
      }
      // 监听 title 标签变化
      const titleElement = document.querySelector('title');
      if (titleElement) {
        const titleObserver = new MutationObserver(function(mutations) {
          sendTitle(document.title);
        });
        titleObserver.observe(titleElement, {
          childList: true,
          characterData: true
        });
      }
    })();
    true;
  `;

// 处理来自 WebView 的消息
  const handleMessage = useCallback(async (event: any) => {
    try {
      const data = JSON.parse(event.nativeEvent.data);
      switch (data.type) {
        case 'title':
          setPageTitle(data.title);
          break;
        default:
          break
      }
    } catch (error) {
      console.log('解析 WebView 消息失败:', error);
    }
  }, []);

     <WebView
        //...
        onMessage={handleMessage}
        injectedJavaScript={injectedJavaScript}
        //...
      />

解决导航返回问题：在webview中点击跳转了很多层，此时点击webview页面的返回直接关闭了，希望能正常返回webview内部的页面

做自定义定义返回逻辑

// 处理 WebView 导航状态变化
  const handleNavigationStateChange = useCallback((navState: any) => {
    console.log('=== 导航状态变化 ===');// 设置是否可以返回
    console.log('canGoBack:', navState.canGoBack);
    setCanGoBack(navState.canGoBack);
  }, []);
// 处理返回按钮
  const handleBackPress = useCallback(() => {
    console.log('webView 是否可以返回', canGoBack);
    if (canGoBack && webViewRef.current) {
      // 如果 WebView 可以返回，则返回 WebView 内部页面
      webViewRef.current.goBack();
      return; // 阻止默认返回行为
    }
    // 如果 WebView 不能返回，则返回上一级页面
    navigation.goBack();
  }, [canGoBack, navigation]);
     <WebView
        ref={webViewRef}
        onLoadEnd={handleLoadEnd}
        onError={handleError}
        onNavigationStateChange={handleNavigationStateChange}
        onMessage={handleMessage}
        injectedJavaScript={injectedJavaScript}
        // ...
        javaScriptEnabled={true}
        domStorageEnabled={true}
        style={styles.webView}
      />