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

时间：2017-07-28 18:25:48

标签： react-native

我是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设备上以纵向给我这个（好）：

portrait

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

landscape

2 个答案:

答案 0 :(得分：0)

仅供参考，Dimensions模块在​​屏幕旋转时不会自动更新。如果你能以某种方式检测旋转并强制重新渲染，那么它只是一个选项。

一个选项是使用View包装需要响应的组件，然后使用onLayout属性。作为onLayout传递的函数将在收到任何时候收到包含{nativeEvent: { layout: {x, y, width, height}}}更新位置和维度的View;如果你将这些写入组件的状态，你可以自动重新计算新的高度和宽度，并在屏幕旋转时触发重新渲染（例如在你的根onLayout上设置View并更新图像＆＃ 39; s width为整个屏幕的宽度。您可以ctrl+f为＆＃34; onLayout＆＃34; here

flex样式道具也会轮换更新，因此您可以在根组件上设置flex:1，并以某种方式使用flexbox来保持所有响应样式。

答案 1 :(得分：0)

是否为您的图片样式添加flex：1应解决您的问题。只要您只设置默认高度而不是宽度。在我的情况下，我已经为我的图像设置了宽度和高度，并且在设备进行横向渲染时遇到了同样的问题。删除宽度后添加flex：1我的问题已解决

相关问题
最新问题