React Native WebView封装扩展：默认配置与自定义需求实现问询

我来帮你解决封装BaseWebView时遇到的这两个问题，咱们一步步拆解实现：

问题1：解决Ref冲突，同时支持内部和外部获取WebView实例 #

默认情况下，WebView只能绑定一个ref，直接同时用内部ref和外部传入的ref会导致冲突。我们可以通过ref转发的方式，让内部和外部都能拿到WebView的实例：

类组件实现方式

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

// 用forwardRef转发外部ref到内部组件
const BaseWebView = React.forwardRef((props, externalRef) => {
  return <BaseWebViewInner {...props} externalRef={externalRef} />;
});

class BaseWebViewInner extends React.Component {
  constructor(props) {
    super(props);
    // 内部保存WebView实例的ref
    this.webViewRef = React.createRef();
  }

  // 统一处理ref赋值：同时给内部ref和外部ref
  setRNWebView = (webViewInstance) => {
    this.webViewRef.current = webViewInstance;
    if (this.props.externalRef) {
      this.props.externalRef.current = webViewInstance;
    }
  };

  // 默认错误处理实现
  defaultOnError = (error) => {
    console.error("[BaseWebView] 加载错误:", error);
    // 这里可以添加通用的错误上报、提示逻辑
  };

  // 默认加载完成处理
  defaultOnLoad = () => {
    console.log("[BaseWebView] 页面加载完成");
  };

  // 默认注入的JS代码
  defaultInjectedJS = () => {
    return `
      console.log("[BaseWebView] 默认注入JS执行");
      // 这里可以添加通用的JS桥接逻辑，比如监听消息、调用Native方法
    `;
  };

  // 示例：暴露给外部的方法（比如刷新）
  reload = () => {
    if (this.webViewRef.current) {
      this.webViewRef.current.reload();
    }
  };

  render() {
    const {
      uri,
      // 解构需要自定义默认值的props
      allowsInlineMediaPlayback,
      mediaPlaybackRequiresUserAction,
      onError,
      onLoad,
      injectedJavaScript,
      externalRef, // 排除掉内部用的props，避免传递给WebView
      ...restProps
    } = this.props;

    // 处理属性的默认值：外部传入优先，否则用内部默认
    const finalAllowsInline = allowsInlineMediaPlayback !== undefined 
      ? allowsInlineMediaPlayback 
      : true;
    const finalMediaRequiresAction = mediaPlaybackRequiresUserAction !== undefined 
      ? mediaPlaybackRequiresUserAction 
      : false;
    const finalOnError = onError || this.defaultOnError;
    const finalOnLoad = onLoad || this.defaultOnLoad;
    const finalInjectedJS = injectedJavaScript || this.defaultInjectedJS();

    return (
      <WebView
        allowsInlineMediaPlayback={finalAllowsInline}
        ref={this.setRNWebView}
        source={{ uri }}
        mediaPlaybackRequiresUserAction={finalMediaRequiresAction}
        onMessage={this.props.onMessage || (() => {})}
        onError={finalOnError}
        onLoad={finalOnLoad}
        injectedJavaScript={finalInjectedJS}
        {...restProps} // 传递剩余所有props，支持外部覆盖任何WebView原生属性
      />
    );
  }
}

export default BaseWebView;

函数组件（React Hooks）实现方式（更推荐）

import React, { useRef, useEffect, useCallback, useImperativeHandle } from 'react';
import { WebView } from 'react-native-webview';

const BaseWebView = React.forwardRef((props, externalRef) => {
  const webViewRef = useRef(null);

  // 同步外部ref和内部ref
  useEffect(() => {
    if (externalRef) {
      externalRef.current = webViewRef.current;
    }
  }, [externalRef]);

  // 默认错误处理
  const defaultOnError = useCallback((error) => {
    console.error("[BaseWebView] 加载错误:", error);
  }, []);

  // 默认加载完成处理
  const defaultOnLoad = useCallback(() => {
    console.log("[BaseWebView] 页面加载完成");
  }, []);

  // 默认注入JS
  const defaultInjectedJS = useCallback(() => {
    return `
      console.log("[BaseWebView] 默认注入JS执行");
    `;
  }, []);

  // 暴露给外部的方法
  useImperativeHandle(externalRef, () => ({
    reload: () => webViewRef.current?.reload(),
    goBack: () => webViewRef.current?.canGoBack() && webViewRef.current.goBack()
  }));

  // 解构并设置默认值
  const {
    uri,
    allowsInlineMediaPlayback = true,
    mediaPlaybackRequiresUserAction = false,
    onError = defaultOnError,
    onLoad = defaultOnLoad,
    injectedJavaScript = defaultInjectedJS(),
    ...restProps
  } = props;

  return (
    <WebView
      ref={webViewRef}
      allowsInlineMediaPlayback={allowsInlineMediaPlayback}
      source={{ uri }}
      mediaPlaybackRequiresUserAction={mediaPlaybackRequiresUserAction}
      onError={onError}
      onLoad={onLoad}
      injectedJavaScript={injectedJavaScript}
      {...restProps}
    />
  );
});

export default BaseWebView;

问题2：解决injectedJavaScript默认注入逻辑 #

上面的代码已经处理了这个问题：通过判断props.injectedJavaScript是否存在，存在则用外部传入的内容，不存在则用内部的defaultInjectedJS()返回的默认代码，确保即使外部不传该参数，也会注入默认JS。

外部使用示例 #

import React, { useRef } from 'react';
import BaseWebView from './BaseWebView';

const App = () => {
  const webViewRef = useRef(null);

  // 自定义错误处理
  const customOnError = (error) => {
    console.error("自定义错误处理:", error);
    // 业务侧的错误逻辑
  };

  return (
    <BaseWebView
      ref={webViewRef}
      uri="https://example.com"
      onError={customOnError}
      injectedJavaScript={`console.log("外部自定义注入JS")`}
      // 可以覆盖任何WebView原生属性
      style={{ flex: 1 }}
      scrollEnabled={false}
    />
  );
};

export default App;

核心要点总结 #

1. Ref转发：通过forwardRef让内部和外部都能获取WebView实例，避免冲突；
2. 默认值兜底：对所有需要默认实现的属性/回调，采用「外部传入优先，内部默认兜底」的逻辑；
3. 剩余props传递：用...restProps传递未解构的属性，保证外部可以覆盖WebView的任何原生配置。

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