React Native的WebView与原生交互

React Native 的 WebView 组件允许你在应用中嵌入第三方网页。要实现 WebView 与原生代码的交互，你可以使用 React Native 提供的 NativeModules。下面是一个简单的示例，展示了如何在 React Native 的 WebView 中与原生代码进行交互。

1. 首先，创建一个名为 WebViewManager.js 的文件，用于实现 WebView 与原生代码的交互。在这个文件中，你需要导入 React Native 的 NativeModules 并暴露一个方法给原生代码调用。

import { NativeModules } from 'react-native';
const { WebViewManager } = NativeModules;

export default {
  navigateToURL(url) {
    WebViewManager.navigateToURL(url);
  },
};

2. 在你的 React Native 项目中，导入 WebViewManager 并使用它。例如，你可以在 App.js 文件中这样做：

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

const App = () => {
  const handleNavigation = (url) => {
    // 在这里处理 URL 跳转逻辑
    console.log('Navigating to:', url);
  };

  return (
    <WebView
      source={{ uri: 'https://example.com' }}
      onNavigationStateChange={(event) => {
        if (event.url !== event.originalUrl) {
          handleNavigation(event.url);
        }
      }}
    />
  );
};

export default App;

3. 在原生代码中，实现 WebViewManager 模块的方法。例如，在 iOS 中，你可以在 WebViewManager.m 文件中这样做：

#import <React/RCTBridgeModule.h>
#import <WebKit/WebKit.h>

@interface RCT_EXTERN_MODULE(WebViewManager, NSObject)

RCT_EXTERN_METHOD(navigateToURL:(NSString *)url);

@end

在 Android 中，你可以在 WebViewManager.java 文件中这样做：

import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.webkit.WebView;

public class WebViewManager extends SimpleViewManager<WebView> {

  @Override
  protected WebView createViewInstance(ThemedReactContext reactContext) {
    return new WebView(reactContext);
  }

  @Override
  public String getName() {
    return "WebViewManager";
  }

  @ReactMethod
  public void navigateToURL(String url) {
    getReactApplicationContext().getCurrentActivity().runOnUiThread(new Runnable() {
      @Override
      public void run() {
        ((WebView) getReactView()).loadUrl(url);
      }
    });
  }
}

现在，当你在 React Native 的 WebView 中加载一个 URL 时，原生代码会收到通知，并可以执行相应的操作。同样，你也可以在原生代码中调用 JavaScript 方法，以便在 WebView 中执行某些操作。