Css 当html字符串已经有宽度时，如何设置imagesMaxWidth_Css_Image_React Native_React Native Render Html

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

css image react-native

Css 当html字符串已经有宽度时，如何设置imagesMaxWidth,css,image,react-native,react-native-render-html,Css,Image,React Native,React Native Render Html,我正在使用react native render html将字符串转换为html元素，同时开发react native应用程序。我从后端通过RESTful API收到了字符串，并且在但我希望将图像调整为窗口的最大宽度，因此我使用： imagesMaxWidth={Dimensions.get('window').width} 整个部分如下： <ScrollView style={styles.content}> <Text style={styles.titl

我正在使用react native render html将字符串转换为html元素，同时开发react native应用程序。我从后端通过RESTful API收到了字符串，并且在

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

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>


{this.props.title}
{this.props.date}

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

那我该怎么设置呢

谢谢

使用

忽略样式

道具忽略原始图片的宽度和高度。使用

ignoredStyles={['height'，'width']}

来解决这个问题。

对于最新的5.0预发行版，有一个更干净的解决方案。将全新的

contentWidth

道具与

useWindowDimensions

挂钩一起使用，图像将自动缩放到内容宽度

纱线添加反应本机渲染-html@unstable

import*as React from'React'；
从“react native”导入{ScrollView，样式表，useWindowDimensions}；
从“react native render HTML”导入HTML；
常量html=`
`;
导出默认函数App（）{
const{width}=useWindowDimensions（）；
返回(
);
}
const styles=StyleSheet.create({
容器：{
flexGrow:1，
},
});

结果：

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

computeEmbeddedMaxWidth

prop:

import*as React from'React'；
从“react native”导入{ScrollView，样式表，useWindowDimensions}；
从“react native render HTML”导入HTML；
常量html=`
`;
函数computeEmbeddedMaxWidth（contentWidth，标记名）{
如果（标记名=='img'）{
返回Math.min（contentWidth，300）；
}
返回内容宽度；
}
导出默认函数App（）{
const{width}=useWindowDimensions（）；
返回(
);
}
const styles=StyleSheet.create({
容器：{
flexGrow:1，
},
});

结果：