如何在react-native-render-html中实现锚点滚动？

步骤1：准备可滚动容器与Refs #

先用ScrollView包裹HTML组件，给两者分别添加ref，用于后续滚动控制和元素定位：

import React, { useRef } from 'react';
import { ScrollView, UIManager, findNodeHandle, Linking } from 'react-native';
import HTML from 'react-native-render-html';

const YourComponent = () => {
  const scrollViewRef = useRef(null);
  const htmlRef = useRef(null);
  
  // 自定义锚点点击处理函数
  const handleLink = (evt, href) => {
    // 识别并处理内部锚点链接
    if (href.startsWith('#')) {
      evt.preventDefault();
      const targetId = href.slice(1); // 提取#后的目标元素ID
      
      // 通过HTML组件的ref查找对应锚点元素
      const targetElement = htmlRef.current?.getElementById(targetId);
      if (!targetElement) return;
      
      // 获取目标元素的屏幕位置信息
      const nodeHandle = findNodeHandle(targetElement);
      UIManager.measure(nodeHandle, (x, y, width, height, pageX, pageY) => {
        // 滚动到目标位置，开启动画平滑过渡
        scrollViewRef.current?.scrollTo({
          y: pageY,
          animated: true,
        });
      });
    } else {
      // 外部链接保留默认跳转逻辑
      Linking.openURL(href);
    }
  };

  const renderersProps = {
    a: { onPress: handleLink },
  };

  return (
    <ScrollView ref={scrollViewRef}>
      <HTML
        ref={htmlRef}
        source={{ html: yourApiHtmlContent }} // 替换为API返回的HTML内容
        renderersProps={renderersProps}
      />
    </ScrollView>
  );
};

export default YourComponent;

步骤2：关键逻辑说明 #

• 阻止默认行为：调用evt.preventDefault()，避免react-native-render-html触发系统浏览器跳转的默认逻辑。
• 元素定位：借助htmlRef.current?.getElementById(targetId)查询目标锚点元素，该方法是react-native-render-html内置的元素查询能力。
• 平滑滚动：通过UIManager.measure()获取元素的屏幕坐标，再调用ScrollView的scrollTo()方法实现锚点跳转。

注意事项 #

• 确保目标锚点元素的id（如<a id="my-item" href="#">My Item</a>）与链接的href值（不含#）完全匹配。
• 若使用较新版本React Native，UIManager可能需要从react-native/Libraries/ReactNative/UIManager路径导入，以官方文档为准。

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