スクロールビューで画像のリストを表示しようとしています。幅は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>
幅:null、高さ:null、flex:1、alignSelfなどのさまざまな組み合わせを試しました。高さが動的ではないことを除いて、上記のソリューションはほとんど機能しています。画像の一部は見えません。
"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')} />
...
Imageコンポーネントがstyle props
で幅と高さの両方を必要とするため、画像の高さは自動的にはなりません。 this answer のようなリモート画像に対して getSize() メソッドを使用して計算できます。また、 this answer のような静的画像の画像比率も計算できます。
多くの便利なオープンソースライブラリがあります-
しばらく考えた後、私は高さを達成することができました:反応ネイティブ画像の自動。このハックを機能させるには、画像の寸法を知る必要があります。画像ビューアで画像を開くだけで、ファイル情報で画像の寸法を取得できます。参考までに、使用した画像のサイズは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
}
Image
の幅と高さを常に設定する必要があります。自動的にサイズを調整することはありません。 Reactネイティブドキュメント そうそう 。
ScrollView
を使用してonLayout
の合計高さを測定し、それに基づいてImage
sの高さを設定する必要があります。 resizeMode
のcover
を使用すると、Image
sのアスペクト比は維持されますが、コンテナよりも大きい場合は明らかにトリミングされます。
上記のすべてのソリューションに問題がありました。最後に、アスペクト比を使用してトリックを行いました。画像の幅と高さがわかっていて、それらが大きい場合は、aspectRatioを計算して、次のように画像に追加します。
<PhotoImage
source={{uri: `data:image/jpeg;base64,${image.base64}`}}
style={{ aspectRatio: image.width / image.height }}
/>
AspectRatioはReact Nativeのレイアウトプロパティであり、画像のアスペクト比を維持し、親コンテナーに収まるようにします。 https://facebook.github.io/react-native/docs/layout-props #aspectratio
画像タグには、このタイプのスタイルを使用できますが、私にとってはうまくいきました:
imageStyle: {
width: Dimensions.get('window').width - 23,
resizeMode: "contain",
height: 211,
},