React Native中HTML字符串含img宽高时如何设置imagesMaxWidth？

我之前在项目里也碰到过一模一样的问题！问题出在react-native-render-html会优先使用img标签自带的width和height属性，所以你设置的imagesMaxWidth就被默认规则覆盖了，导致图片没按预期缩放。下面给你两种实用的解决方案：

方案一：自定义图片渲染器（精准控制宽高比） #

这种方法可以完全自定义图片的渲染逻辑，既能保留原图片的宽高比，又能强制限制最大宽度。

首先导入需要的组件，然后定义自定义渲染器：

import { Image, Dimensions } from 'react-native';
import HTML from 'react-native-render-html';

// ... 你的组件代码

const customRenderers = {
  img: (htmlAttribs) => {
    const { src, width, height } = htmlAttribs;
    const maxAllowedWidth = Dimensions.get('window').width - 40;
    
    // 计算原图片的宽高比
    const aspectRatio = parseInt(width) / parseInt(height);
    // 取原宽度和最大允许宽度的较小值作为新宽度
    const targetWidth = Math.min(parseInt(width), maxAllowedWidth);
    // 根据宽高比计算对应高度
    const targetHeight = targetWidth / aspectRatio;

    return (
      <Image
        source={{ uri: src }}
        style={{
          width: targetWidth,
          height: targetHeight,
          resizeMode: 'contain' // 可选：'cover' 会填充容器，根据需求调整
        }}
      />
    );
  }
};

// 在HTML组件中使用自定义渲染器
<ScrollView style={styles.content}>
  <Text style={styles.title}>{this.props.title}</Text>
  <Text>{this.props.date}</Text>
  <HTML 
    html={this.props.content} 
    customRenderers={customRenderers} 
  />
</ScrollView>

方案二：修改HTML节点属性（简单快捷） #

如果不需要太精细的控制，直接移除img标签自带的width和height属性，让imagesMaxWidth生效即可：

import { Dimensions } from 'react-native';
import HTML from 'react-native-render-html';

// ... 你的组件代码

// 定义修改节点的函数
const alterNode = (node) => {
  // 匹配所有img标签
  if (node.type === 'tag' && node.name === 'img') {
    // 删除原有的宽高属性
    delete node.attribs.width;
    delete node.attribs.height;
  }
  return node;
};

// 在HTML组件中应用
<ScrollView style={styles.content}>
  <Text style={styles.title}>{this.props.title}</Text>
  <Text>{this.props.date}</Text>
  <HTML 
    html={this.props.content} 
    imagesMaxWidth={Dimensions.get('window').width - 40}
    alterNode={alterNode}
  />
</ScrollView>

小提示 #

• 两种方案都能解决问题：方案一更灵活，适合需要保留精确比例的场景；方案二更简洁，适合快速解决问题。
• 可以根据需求调整resizeMode，contain会完整显示图片（可能留空白），cover会填满容器（可能裁剪部分图片）。

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