React Native Webview段落文本传API并动态高亮技术求助

针对你遇到的核心问题，直接给出可落地的解决思路和代码示例：

1. 解决注入JS仅执行一次、定期更新的问题 #

不要依赖单次injectedJavaScript，改用双向消息通信+网页端常驻脚本的方式：

• 首次加载WebView时注入基础监听脚本，用来接收RN端指令、处理段落逻辑；
• RN端通过postMessage触发网页端的函数执行，而非重复注入完整脚本。

RN端核心代码：

import { WebView } from 'react-native-webview';
import { useState, useEffect } from 'react';

export default function WebViewHighlight() {
  const [webViewRef, setWebViewRef] = useState(null);

  // 向网页发送指令
  const sendCommandToWeb = (command) => {
    webViewRef?.postMessage(JSON.stringify(command));
  };

  // 定期触发未处理段落抓取（比如每2秒）
  useEffect(() => {
    const interval = setInterval(() => {
      sendCommandToWeb({ type: 'fetch-unprocessed-paragraphs' });
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  // 处理网页发回的段落内容，调用API后触发高亮
  const handleWebMessage = (event) => {
    const data = JSON.parse(event.nativeEvent.data);
    if (data.type === 'paragraph-data') {
      // 调用你的业务API
      fetch('your-api-endpoint', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ content: data.content })
      })
      .then(res => res.json())
      .then(apiRes => {
        // 发送高亮指令到网页
        sendCommandToWeb({
          type: 'highlight-paragraphs',
          targetIds: apiRes.highlightedIds // API返回的需高亮段落ID列表
        });
      });
    }
  };

  // 首次注入的常驻脚本
  const baseInjectedScript = `
    window.addEventListener('message', (event) => {
      const command = JSON.parse(event.data);
      switch(command.type) {
        case 'fetch-unprocessed-paragraphs':
          fetchUnprocessedParagraphs();
          break;
        case 'highlight-paragraphs':
          highlightParagraphs(command.targetIds);
          break;
        case 'clear-highlights':
          clearAllHighlights();
          break;
      }
    });

    // 抓取未处理段落并发送给RN
    function fetchUnprocessedParagraphs() {
      // 优先用p标签，可扩展到div/section等文本容器，排除已处理的
      const paragraphs = Array.from(document.querySelectorAll('p:not(.processed-para)'));
      paragraphs.forEach((para, idx) => {
        const uniqueId = \`para-\${Date.now()}-\${idx}\`;
        para.dataset.paraId = uniqueId;
        para.classList.add('processed-para');
        window.ReactNativeWebView.postMessage(JSON.stringify({
          type: 'paragraph-data',
          id: uniqueId,
          content: para.textContent.trim()
        }));
      });
    }

    // 高亮指定段落
    function highlightParagraphs(targetIds) {
      clearAllHighlights(); // 先清除旧高亮
      targetIds.forEach(id => {
        const para = document.querySelector(\`[data-para-id="\${id}"]\`);
        if (para) {
          para.classList.add('highlighted-para');
          para.style.backgroundColor = '#ffeb3b'; // 自定义高亮样式
        }
      });
    }

    // 清除所有高亮痕迹
    function clearAllHighlights() {
      document.querySelectorAll('.highlighted-para').forEach(para => {
        para.classList.remove('highlighted-para');
        para.style.backgroundColor = '';
      });
    }
  `;

  return (
    <WebView
      ref={setWebViewRef}
      source={{ uri: '用户选择的动态URL' }}
      injectedJavaScript={baseInjectedScript}
      onMessage={handleWebMessage}
      javaScriptEnabled={true}
    />
  );
}

2. API响应后触发JS函数 #

API返回结果后，RN端通过sendCommandToWeb发送highlight-paragraphs指令，网页端监听消息后立即执行highlightParagraphs函数，实现按需响应而非定期触发。

3. 标记已处理段落 #

通过给段落添加自定义类名processed-para和唯一data-para-id属性，确保每个段落仅被处理一次，不会重复发送到API。

4. 动态网站无固定类名+清除旧高亮 #

• 无固定类名：优先用通用文本标签（p），如果覆盖不全，可扩展选择器为'p, div:not([class*="nav"]), section:not([class*="ad"])'，手动排除导航、广告等非内容元素；
• 清除旧高亮：每次执行高亮逻辑前调用clearAllHighlights函数，移除之前的高亮类和行内样式，避免旧高亮残留。

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