React Native的WebView與原生交互

React Native 的 WebView 組件允許你在應(yīng)用中嵌入第三方網(wǎng)頁。要實現(xiàn) WebView 與原生代碼的交互，你可以使用 React Native 提供的 NativeModules。下面是一個簡單的示例，展示了如何在 React Native 的 WebView 中與原生代碼進行交互。

1. 首先，創(chuàng)建一個名為 WebViewManager.js 的文件，用于實現(xiàn) WebView 與原生代碼的交互。在這個文件中，你需要導(dǎo)入 React Native 的 NativeModules 并暴露一個方法給原生代碼調(diào)用。

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

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

2. 在你的 React Native 項目中，導(dǎo)入 WebViewManager 并使用它。例如，你可以在 App.js 文件中這樣做：

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

const App = () => {
  const handleNavigation = (url) => {
    // 在這里處理 URL 跳轉(zhuǎn)邏輯
    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. 在原生代碼中，實現(xiàn) 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);
      }
    });
  }
}

現(xiàn)在，當(dāng)你在 React Native 的 WebView 中加載一個 URL 時，原生代碼會收到通知，并可以執(zhí)行相應(yīng)的操作。同樣，你也可以在原生代碼中調(diào)用 JavaScript 方法，以便在 WebView 中執(zhí)行某些操作。