调整后的图片占用太多UIspace

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>

当前结果：

我需要它从图像容器中剪掉多余的 space，或者将图像放置在容器的顶部，而不是中间。

我正在尝试做的事情：

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>

调整后的图片占用太多UIspace

Resized image takes up too much UI space

javascript

react-native

react-native-ios