イメージの幅を100％に設定し、高さをautoに設定するにはどうすればいいですか？

Question

画像のリストをスクロールビューに表示しようとしています。幅は100％にする必要がありますが、高さは自動で、縦横比を維持する必要があります。

検索はフルスクリーンの背景スタイルを与えるさまざまなソリューションを指摘しました。ヌル、高さ：ヌル、フレックス：

const styles = StyleSheet.create({ 
    image: { 
     width: null, 
     height: 300, 
     resizeMode: 'cover' 
    } 
}); 

<ScrollView style={{flex: 1}}> 
    <Image style={styles.image} source={require('../../../images/collection-imag1.png')}/> 
    <Image style={styles.image} source={require('../../../images/collection-imag2.png')}/> 
</ScrollView> 

Iは、幅の様々な組み合わせを試してみました1、alignSelf等を上記の溶液はほとんど動作している、高さが動的ではない点が異なります。画像の一部が表示されません。

Answer 1

"resizeMode"は、スタイルプロパティではありません。以下のコードのように画像コンポーネントのPropsに移動する必要があります。

const win = Dimensions.get('window'); 

const styles = StyleSheet.create({ 
    image: { 
     flex: 1, 
     alignSelf: 'stretch', 
     width: win.width, 
     height: win.height, 
    } 
}); 

... 
    <Image 
     style={styles.image} 
     resizeMode={'contain'} /* <= changed */ 
     source={require('../../../images/collection-imag2.png')} /> 
... 

Answer 2

Imageの幅と高さは、常に設定する必要があります。自動的にサイズを決めるつもりはありません。 React Nativeのドキュメントsays so

onLayoutを使用してScrollViewの合計高さを測定し、それに基づいてImageの高さを設定する必要があります。 resizeModeのcoverを使用すると、Imageの縦横比は維持されますが、コンテナよりも大きい場合は明らかに縦横比が切り抜かれます。

Answer 3

私はしばらくの間考えた後、反応ネイティブイメージで高さ：autoを達成することができました。 このハックが機能するには、画像のサイズを知る必要があります。任意の画像ビューアであなたの画像を開くだけで、あなたの画像の寸法をファイル情報に得ることができます。 参考のために私が使用した画像のサイズは541 X 362の

まず輸入寸法からで反応し、ネイティブ

import { Dimensions } from 'react-native'; 

あなたは計算

const win = Dimensions.get('window'); 

今すぐウィンドウのサイズを取得する必要があります比率として

const ratio = win.width/541; //541 is actual image width 

あなたのイメージにスタイルを追加

imageStyle: { 
    width: win.width, 
    height: 362 * ratio, //362 is actual height of image 
}