width='100%' 对原生宽度小于最大屏幕尺寸的图像做出原生反应答案

【问题标题】：width='100%' in react native for images whose native width is smaller than max screen dimensionswidth='100%' 对原生宽度小于最大屏幕尺寸的图像做出原生反应
【发布时间】：2017-04-03 23:02:09
【问题描述】：

我正在使用 width='100%' 使用为 iphone 7 @2x（750px 宽度）创建的图像对原生 v.42 做出反应。这适用于 iphone 7，但如果我查看 7plus 上的图像，它们会在顶部和底部被剪裁。为了防止这种情况，我必须为 7plus (818px @2x) 保存图像。

有谁知道如何使用 width='100%' 并按比例使图像缩放超出其最大原生尺寸？更改调整大小模式不起作用。如果可以的话，我也不想使用任何插件。

我知道我可以根据窗口尺寸明确定义高度和宽度：

    import { Dimensions } from 'react-native'

    const { height, width } = Dimensions.get('window')

    export {
      height as deviceHeight,
      width as deviceWidth,

}

并使用比率计算高度，但我正在寻找一种不必声明高度尺寸的方法（本质上是height: auto）。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

您可以尝试一些事情。

试着让图片覆盖屏幕

resizeMode: 'cover'

因为这都是 flexbox 布局，你可以使用 align-self 告诉孩子拉伸

alignSelf: 'stretch'

如果这些都不适合你。我之前做过的另一种选择是删除静态大小，使其自然增长（通过为宽度和高度指定 null）

width: null,
height: null

Facebook docs on support

【讨论】：