web-dev-qa-db-ja.com

React Nativeで画像の幅を100％に、高さをautoに設定するにはどうすればよいですか？

スクロールビューで画像のリストを表示しようとしています。幅は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などのさまざまな組み合わせを試しました。高さが動的ではないことを除いて、上記のソリューションはほとんど機能しています。画像の一部は見えません。

javascriptimagereactjsreact-native
37
Prabhakar Bhat

"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 のような静的画像の画像比率も計算できます。

多くの便利なオープンソースライブラリがあります-

31
Lwin Kyaw Myat

しばらく考えた後、私は高さを達成することができました：反応ネイティブ画像の自動。このハックを機能させるには、画像の寸法を知る必要があります。画像ビューアで画像を開くだけで、ファイル情報で画像の寸法を取得できます。参考までに、使用した画像のサイズは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
}
26
Vinit Kadam

Imageの幅と高さを常に設定する必要があります。自動的にサイズを調整することはありません。 Reactネイティブドキュメント そうそう 。

ScrollViewを使用してonLayoutの合計高さを測定し、それに基づいてImagesの高さを設定する必要があります。 resizeModeのcoverを使用すると、Imagesのアスペクト比は維持されますが、コンテナよりも大きい場合は明らかにトリミングされます。

6
rclai

上記のすべてのソリューションに問題がありました。最後に、アスペクト比を使用してトリックを行いました。画像の幅と高さがわかっていて、それらが大きい場合は、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

0
Łukasz Blaszyński

画像タグには、このタイプのスタイルを使用できますが、私にとってはうまくいきました：

imageStyle: {
    width: Dimensions.get('window').width - 23,
    resizeMode: "contain",
    height: 211,
 },
0
kallayya