如何在React Native Text组件中将HTML锚标签渲染为可点击超链接

1. 修复react-native-render-html排版失效问题 #

90%的<p>、<br>标签排版失效问题都是缺少contentWidth配置、未自定义块级标签默认样式导致的，按以下步骤配置即可解决：

• 先安装对应版本依赖：

npm install react-native-render-html @native-html/transient-render-engine
# 若使用yarn则执行
yarn add react-native-render-html @native-html/transient-render-engine

• 组件内完整配置示例：

import React from 'react';
import { useWindowDimensions, Linking, Text } from 'react-native';
import RenderHTML from 'react-native-render-html';

const HtmlRenderer = ({ htmlContent }) => {
  // 必须传入contentWidth参数，否则块级标签的布局逻辑会失效
  const { width } = useWindowDimensions();

  // 自定义各标签默认样式，解决排版混乱问题
  const tagsStyles = {
    p: {
      marginVertical: 8,
      lineHeight: 20,
      fontSize: 14
    },
    br: {
      height: 6
    }
  };

  // 自定义a标签渲染逻辑，实现可点击跳转
  const renderers = {
    a: (htmlAttribs, children) => {
      const handlePress = () => {
        if (htmlAttribs.href) {
          Linking.openURL(htmlAttribs.href);
        }
      };
      return (
        <Text style={{ color: '#2196F3', textDecorationLine: 'underline' }} onPress={handlePress}>
          {children}
        </Text>
      );
    }
  };

  return (
    <RenderHTML
      source={{ html: htmlContent }}
      contentWidth={width}
      tagsStyles={tagsStyles}
      renderers={renderers}
      defaultTextProps={{
        selectable: true // 可选配置，支持文本长按选中
      }}
    />
  );
};

export default HtmlRenderer;

2. 备选方案：WebView渲染复杂HTML #

如果返回的HTML结构非常复杂，react-native-render-html无法满足排版需求，可使用react-native-webview渲染，自适应高度配置如下：

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

const HtmlWebView = ({ htmlContent }) => {
  const [webHeight, setWebHeight] = useState(0);

  // 注入JS获取HTML内容实际高度
  const injectedJS = `
    window.onload = () => {
      window.ReactNativeWebView.postMessage(document.documentElement.scrollHeight);
    };
  `;

  return (
    <WebView
      source={{ html: htmlContent }}
      injectedJavaScript={injectedJS}
      onMessage={(event) => {
        setWebHeight(Number(event.nativeEvent.data));
      }}
      style={{ height: webHeight, width: '100%' }}
      scrollEnabled={false}
      javaScriptEnabled={true}
    />
  );
};

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