React Native：高度为 100% 的图像答案

【问题标题】：React Native: Image with 100% heightReact Native：高度为 100% 的图像
【发布时间】：2020-11-27 11:35:18
【问题描述】：

我有一张应该始终占父尺寸 100% 的图像。宽度应相应调整以保持图像的纵横比。宽度可以小于或大于父级。高度必须等于父尺寸。

<View style={{height: 220}}>
  <Image source={{uri: 'myuri.jpg'}} style={{height: '100%, ...?}} />
</View>

我只找到宽度固定而高度动态调整的解决方案。我想要反过来。

【问题讨论】：

标签： image react-native aspect-ratio

【解决方案1】：

import { Dimensions } from 'react-native';

您可以使用以下代码获取应用程序窗口的宽度和高度：

<View style={{height: Dimensions.get("window").height}}>
  <Image source={{uri: 'myuri.jpg'}} 
         style={{
               height: Dimensions.get("window").height*0.5,
               width: Dimensions.get("window").width
               }} 
        />
</View>

使用这种方式，您可以按比例调整所需的大小。

您也可以在此处查看文档。 Dimensions

【讨论】：

感谢您的建议，但我无法设置固定的纵横比。图片可能有不同的纵横比。

【解决方案2】：

试试这个

<View style={{height: 220}}>
  <Image source={{uri: 'myuri.jpg'}} style={{height: '100%, width: 'auto'}} />
</View>

还有resizeMode: 'contain'可以帮到你很多。

可能对您有帮助的参考资料：https://reactnative.dev/docs/image#resizemode

【讨论】：