ネイティブイメージのデバイスのサイズが変更されない（iOS）向きが変更されますか？

Question

私はリアクションネイティブの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画像ファイルのサイズは重要ではないと予想しています。なぜなら、必要な場合にはそれを大きくする必要があるからです。それは起こっていないようです。

Answer 1

画面が回転するときFYI Dimensionsモジュールは自動的に更新されません。何らかの形で回転を検出して再レンダリングを強制することができる場合にのみオプションです。

Viewで応答する必要があるコンポーネントをラップし、次にonLayoutプロパティを使用することもできます。 onLayoutとして渡された関数は、変更されたときにいつでもViewの更新された位置と寸法を含む{nativeEvent: { layout: {x, y, width, height}}}を受け取るでしょう。これらをコンポーネントの状態に書き込むと、新しい高さと幅が自動的に再計算され、画面が回転するとレンダリングが開始されます（たとえば、ルートViewにonLayoutを設定し、画像のwidthを画面全体の幅に更新します）。 「onLayout」のctrl+fはhereです。

スタイル小道具もローテーション時に更新されますので、例えばルートコンポーネントにflex:1と設定することができます。また、何らかの形でフレックスボックスを使用して、すべてのスタイルに応じたスタイルを維持できます。

Answer 2

あなたのイメージスタイルにフレックスを追加すると、問題が解決するはずです。あなたがデフォルトの高さだけを設定し、幅は設定しない限り。私の場合、画像の幅と高さの両方を設定していて、デバイスが横長になったときに同じ問題が発生しました。一度私は幅を削除し、フレックスを追加しました：1私の問題は解決しました