如何在可变高度容器中使用反应原生图像调整大小方法?

Question

我有这样的东西：

<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{ height: 30}}>...stuff</View>
<View style={{ flexGrow: 1}}>
<Image
style={{
width: '100%',
height: '100%',
}}
source={{
uri: mediaUrl,
}}
resizeMode='cover'
/>
</View>
<View style={{maxHeight: '50%'}}>...stuff</View>
</View>

因此，您会看到底部View会根据其内容进行调整，因此中间的也会进行调整。问题是图像有时会推动容器不遵守第三个容器的最大高度。

我该如何解决这个问题？

Answer 1

您必须在样式中添加 resizeMode='cover' 内部样式，如下所示：

<Image
style={{
width: '100%',
height: '100%',
resizeMode='cover'
}}
source={{
uri: mediaUrl,
}}
/>

了解更多详情 => https://mehrankhandev.medium.com/understanding-resizemode-in-react-native-dd0e455ce63