リアクションネイティブアスペクト比の画像を維持する

Question

私は1x 2xおよび3xデバイスで表示したい1242 X 450画像を持っています。私が持っている現在のコードは、3xデバイスでうまく動作しますが、イメージのエッジが2xデバイスで切り取られ、1xデバイスでも可能になることがわかります。コードで

（1242 X 450/3Xので）

が、私はそれを修正することができますどのような方法があります私は150に414と高さに幅を設定するのですか？

画像を一覧表示するには、画像の大きさに対処する必要はありません

<View style={styles.row}> 
        <Image 
        style={styles.featureImage} 
        source={{ 
         uri: this.props.image_src 
        }}/> 
    </View> 


const styles = StyleSheet.create({ 
    row: { 
     alignItems: 'center', 
     backgroundColor: 'lightgrey', 
     flexDirection: 'row', 
     margin: 6, 
    }, 

    featureImage: { 
     height: 150, 
     width: 414 
    } 
}); 

Answer 1

の内側にあります。幅と高さのプロパティを適切に与えるだけです。

importプラットフォームとデバイスの幅と高さを取得します。 https://facebook.github.io/react-native/docs/dimensions.html

var {scrHeight, scrwidth} = Dimensions.get('window'); 

画像スタイルを定義し、画像

ResizeModeです列挙型（ 'カバー'、 '含む'、 'ストレッチ'、「ためResizeModeですを使用

imageContainer = { 
    width:scrwidth/5, 
    height:scrHeight/5, 
} 

イメージコンテナのスタイルを定義します繰り返し、中央）

imageStyle={ 
flex:1, 
} 
<View style={styles.imageContainer }> 
    <Image style={styles.imageStyle} resizeMode={'contain'}> 
    </Image> 
</View> 

画像の大きさに関係なく、screenWidth/5 X screenHeight/5をカバーします。 画像が高解像度で、デバイスが圧縮されていない場合は、逆の場合に圧縮されます。伸張されます。いずれの場合も特に画像の解像度と画像に残っている領域との間に大きな違いがある場合は、2番目の場合は、画像に悪い画像が含まれます。このような状況を避けるために、同じイメージのサイズを変更することができます。

add 
└── img 
    ├── apple@1x.png 100x100 (resolutions are random) 
    └── apple@2x.png 150x150 
     apple@3x.png 175x175 

https://facebook.github.io/react-native/docs/images.html

あなたはとても適切な画像をすれば、自動的に反応することにより、選択されます。画像はデバイスのdpiに従って選択されます。あなたのデバイスが良い解像度を持っているなら、それほど小さいイメージでなければ大きなイメージを得るでしょう。このような状況は、サイズが大きく解像度が低いデバイス（一部のAndroidタブレット）以外は、ほとんどの場合動作します。この場合、dpi画像はおそらく最小の画像になるので、品質が悪くなります。