React Native：高度为 100% 的图像

Posted 2023-03-15

【中文标题】React Native：高度为 100% 的图像

【英文标题】：React Native: Image with 100% height

【发布时间】：2020-11-27 11:35:18

【问题描述】：

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

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

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

【参考方案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