如何在html字符串中设置图像最大宽度已经有宽度答案

【问题标题】：How to set imagesMaxWidth when html string already has a width如何在html字符串中设置图像最大宽度已经有宽度
【发布时间】：2020-02-19 11:00:14
【问题描述】：

我在开发 React Native 应用程序时使用 react-native-render-html 将字符串转换为 html 元素。我从后端通过 RESTful API 收到了字符串，并且在 <img> 标签中已经设置了宽度和高度：

<img class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />

但我希望将图像调整为窗口的最大宽度，所以我使用：

imagesMaxWidth={Dimensions.get('window').width}

整个片段如下：

  <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}
    />
  </ScrollView>

但图像无法调整到窗口的最大宽度。

那么我该如何设置呢？

谢谢

【问题讨论】：

标签： css image react-native react-native-render-html

【解决方案1】：

使用ignoredStyles 属性忽略原始图片的宽度和高度。使用ignoredStyles={['height', 'width']} 解决问题。

【讨论】：

【解决方案2】：

使用最新的 5.0 预发行版，有一个更简洁的解决方案。使用全新的 contentWidth 属性和 useWindowDimensions 钩子，图像将自动缩放到内容宽度！

yarn add react-native-render-html@unstable

import * as React from 'react';
import {ScrollView, StyleSheet, useWindowDimensions} from 'react-native';
import HTML from 'react-native-render-html';

const html = `
<img class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />
`;

export default function App() {
  const {width} = useWindowDimensions();
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <HTML contentWidth={width} html={html} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
  },
});

结果：

此外，如果您希望这种行为并且不希望图像大于 300，您可以使用新的 computeEmbeddedMaxWidth 属性：

import * as React from 'react';
import {ScrollView, StyleSheet, useWindowDimensions} from 'react-native';
import HTML from 'react-native-render-html';

const html = `
<img class="aligncenter" src="https://www.allfin.com/u/cms/www/201811/13142949sf02.jpg" width="600" height="408" />
`;

function computeEmbeddedMaxWidth(contentWidth, tagName) {
  if (tagName === 'img') {
    return Math.min(contentWidth, 300);
  }
  return contentWidth;
}

export default function App() {
  const {width} = useWindowDimensions();
  return (
    <ScrollView contentContainerStyle={styles.container}>
      <HTML
        contentWidth={width}
        computeImagesMaxWidth={computeImagesMaxWidth}
        html={html}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
  },
});

结果：

【讨论】：