调整大小的图像占用了太多的UI空间

Question

我有一个绝对定位的圆形图像。图像只需要屏幕宽度的17％，并且距离顶部5个像素。

问题是，当我调整图像大小以占据屏幕宽度的17％时，它会这样做，但同时容器会变长。图像本身不会拉伸，而是位于细长图像容器的中间。

样式：

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

我正在呈现的内容：

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

当前结果：

我需要它来切断Image容器中的额外空间，或者将图像放在容器的顶部而不是中间。

我正在尝试做什么：

Answer 1

解决此问题的一种方法是将图片打包在aspect ratio为1的视图中：

<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>