サイズ変更された画像がUIスペースを多く占有しています

Question

私は絶対的に配置された丸い画像を持っています。画像は画面幅のわずか17％しか必要とせず、上から5ピクセルの位置に配置する必要があります。

問題は、画面の幅の17％を占めるように画像のサイズを変更すると問題になりますが、同時にコンテナが細長くなります。イメージ自体は伸びませんが、イメージコンテナの中央に配置されています。

スタイル：

<Image 
     style = { styles.imageBase } 
     source = { require('roundImage.png') }> 
</Image> 

現在の結果：私はレンダリングてる何

const styles = StyleSheet.create({ 
    imageBase: { 
     position: 'absolute', 
     left: 15, 
     top: 5, 
     width: '17%', 
     resizeMode: 'contain', 
     backgroundColor: 'red', 
    } 
}); 

を、私はそれがイメージコンテナから余分なスペースをカットするか必要がある、またはイメージを中央の代わりにコンテナの上部に配置します。私がやろうとしている何

：これを解決する

Answer 1

一つの方法は、1のaspect ratioとビューであなたのイメージをラップすることです：

<View style={{ flex: 1 }}> 
    <View 
    style={{ 
     position: 'absolute', 
     left: 15, 
     top: 5, 
     width: '17%', 
     aspectRatio: 1, 
    }} 
    > 
    <Image 
     style={{ 
     width: '100%', 
     height: '100%', 
     backgroundColor: 'red', 
     resizeMode: 'contain', 
     }} 
     source={require('roundImage.png')} 
    /> 
    </View> 
</View>