React Native Image不會在設備（iOS）方向更改上調整大小？

我是一個React Native n00b，所以也許我錯過了一些殘酷的東西。React Native Image不會在設備（iOS）方向更改上調整大小？

 <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圖像文件的大小並不重要，因爲如果需要的話，它應該被拉伸得更大。這似乎並沒有發生。

來源

2017-07-28 xaphod

嘗試'resizeMode =「包含」'也許你將不得不將其寬度和高度設置爲相對於你的窗口尺寸來修復 –

@KhalilKhalaf怎麼做我「設置其寬度和高度，以固定您的窗口尺寸」？ – xaphod

從[** this **]（https://stackoverflow.com/a/32031698/5890227），您可以獲得窗口的高度和寬度。然後你會設置你的圖像爲「height/10」和「width/2」等。讓我知道它是如何去的，我會幫助更多。 –

FYI的Dimensions模塊不會自動更新時，屏幕旋轉。這只是一個選擇，如果你能以某種方式檢測到旋轉並強制重投。

一種選擇是將需要響應的組件包裝爲View，然後使用onLayout屬性。作爲onLayout傳遞的功能將收到一個{nativeEvent: { layout: {x, y, width, height}}}，其中包含View的更新位置和尺寸;如果將它們寫入組件的狀態，您可以自動重新計算新的高度和寬度，並在屏幕旋轉時觸發重新渲染（例如，在根View上設置onLayout並將圖像的width更新爲整個屏幕的寬度）。您可以將ctrl+f換成「onLayout」here。

flex樣式道具也會更新輪轉，因此您可以在您的根組件上設置flex:1，並以某種方式使用flexbox來響應式地保留所有樣式。

來源

2017-07-29 02:59:58 SoZettaSho

儘可能已經有'flex：1'。問題是組件的大小確實發生了變化，但是'resizeMode =「cover」'不會像旋轉時那樣重新調整圖像 – xaphod

@xaphod如果在旋轉後更新包含圖像的組件的狀態，會發生什麼？它是否調整大小？ – SoZettaSho

對你的圖像風格添加flex：1應該可以解決你的問題。只要您只設置默認高度而不是寬度。在我的情況下，我已經爲我的圖像設置了寬度和高度，並且在設備變爲橫向時也遇到同樣的問題。一旦我刪除了寬度並添加了flex：1我的問題得到了解決

來源

2017-08-03 14:31:31

不，flex：1會導致圖像佔用比它應該更多的空間，即忽略它的固定高度。在視圖中包裝它可以修復這個問題，但圖像仍然不能縮放，因爲resizeMode =「cover」意味着它應該。 – xaphod

React Native Image不會在設備（iOS）方向更改上調整大小？

回答

相關問題