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

Question

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

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

样式:

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>

当前结果:

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

我正在尝试做的事情:

Answer 1

解决此问题的一种方法是将图像包装在带有 aspect ratio 的 View 中共 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>