React Native Image 不会在设备（iOS）方向更改时调整大小？

Posted 2023-03-15

【中文标题】React Native Image 不会在设备（iOS）方向更改时调整大小？

【英文标题】：React Native Image doesn't resize on device (iOS) orientation change?

【发布时间】：2017-07-28 18:25:47

【问题描述】：

我是 React Native n00b，所以也许我遗漏了一些非常明显的东西。

      <Image
        source=signoutGradient
        resizeMode="cover"
        style= height: 60, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0)' 
      >
        <Button
          title="SIGN OUT"
          color="#FFFFFF"
          onPress=this.onPressSignOut
        />
      </Image>

...在我的 ios 设备上给我这个肖像（好）：

...但是当我旋转设备时，这是横向模式（不好）。怎么会？如何解决这个问题？我期望实际 PNG 图像文件的大小无关紧要，因为如果需要，它应该被拉伸得更大。这似乎没有发生。

【问题讨论】：

试试resizeMode="contain"，也许你必须将它的宽度和高度设置为相对于你的窗口尺寸是固定的

@KhalilKhalaf 我如何“将其宽度和高度设置为相对于您的窗口尺寸固定”？

从this，你可以得到你的窗口的高度和宽度。然后你可以将你的图片设置为例如height/10和width/2等。让我知道它是怎么回事，我会提供更多帮助。

【参考方案1】：

仅供参考，Dimensions 模块不会在屏幕旋转时自动更新。如果您能以某种方式检测到旋转并强制重新渲染，这只是一种选择。

一种选择是使用View 包装需要响应的组件，然后使用onLayout 属性。作为onLayout 传递的函数将收到一个nativeEvent: layout: x, y, width, height，其中包含View 的更新位置和尺寸，只要它们发生变化；如果您将这些写入组件的状态，您可以自动重新计算新的高度和宽度并在屏幕旋转时触发重新渲染（例如，在您的根 View 上设置 onLayout 并将图像的 width 更新为宽度整个屏幕）。您可以ctrl+f 为“onLayout”here。

flex 样式属性也会在旋转时更新，因此您可以在根组件上设置 flex:1 并以某种方式使用 flexbox 来保持响应式样式。

【讨论】：

尽可能已有flex: 1。问题是组件的大小确实发生了变化，但resizeMode="cover" 并没有像旋转时那样重新缩放图像

@xaphod 如果在旋转后更新包含图像的组件的状态会发生什么？它会调整大小吗？

【参考方案2】：

是的，将 flex: 1 添加到您的图像样式应该可以解决您的问题。只要您只设置默认高度而不是宽度。在我的情况下，我已经为我的图像设置了宽度和高度，并且在设备横向运行时遇到了同样的问题。一旦我删除了宽度并添加了 flex: 1 我的问题就解决了

【讨论】：

不，flex: 1 会导致图像占用比应有的更多空间，即忽略其固定高度。将其包装在 View 中修复了该问题，但图像仍然无法缩放，因为 resizeMode="cover" 暗示它应该这样做。