css - 当html字符串已经有宽度时如何设置imagesMaxWidth

Question

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

<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>

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

那么我该如何设置呢？

谢谢

score 2 · Accepted Answer

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

score 0 · Accepted Answer

在最新的 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,
  },
});

结果：

css - 当html字符串已经有宽度时如何设置imagesMaxWidth

2 回答 2

Related

Reference