1.h5向rn通讯

通过window.ReactNativeWebView?.postMessage() 向RN发送消息

export function sendData(msg, info) {
  if (window.ReactNativeWebView) {
    window.ReactNativeWebView?.postMessage(JSON.stringify({ msg, info }));
  } else {
    throw Error('postMessage接口还未注入');
  }
}

2.RN中接收信息

RN中使用WebView的onMessage接收消息

const onMessage = (e: any) => {
    if (e?.nativeEvent?.data) {
      const { msg, info } = JSON.parse(e?.nativeEvent?.data);
      switch (msg) {
        case "takePhoto": {
          takePhoto();
          break;
        }
        case "chooseImage": {
          handleChooseImage();
          break;
        }
        case "video": {
          onStartRecord();
          break;
        }
        default:
          break;
      }
    }
  };
  <WebView
    ...
    onMessage={onMessage}

  />

3.rn中直接修改展示的h5页面

通过传递injectedJavaScript对js进行修改

const injectedJS = `
var backButton = document.createElement("button");
backButton.onclick = function () {
    window.history.back();
};

var svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgIcon.setAttribute("width", "22px");
svgIcon.setAttribute("height", "22px");
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", "M12.354 4.86719L13.618 6.13114L8.74995 10.9992L13.618 15.8672L12.354 17.1311L6.22205 10.9992L12.354 4.86719Z"); // 这里填入你的 SVG 图像路径
path.setAttribute("fill", "#18191A");
svgIcon.appendChild(path);
backButton.appendChild(svgIcon);
`
 <WebView
    ...
    injectedJavaScript={injectedJS}
  />