如何在 React Native 中删除图像周围的多余空间？

Question

我有一个 React Native 应用程序，我需要将图像放在屏幕的最顶部，并且宽度从屏幕的一侧到另一侧。我已将我的图像（黑色矩形）作为 png 放入应用程序中，当我使用绝对位置和顶部 0 和左侧 0 时，但我注意到即使图像是从屏幕的一侧到另一侧，它也不在屏幕顶部，所以我给它添加了背景颜色，发现图像周围有很多空间，即使当我打开图像时，它也不在那里，因为它被裁剪到实际图像的最边缘。我的问题是如何删除此空间以获得应用程序所需的外观（图像位于最顶部，全宽）？

const SignIn = () => {
  return (
    <ImageBackground source={paperBackground} style={styles.backgroundImage}>
      <Image source={topFrame} resizeMode="contain" style={styles.topFrame} />
    </ImageBackground>
  );
};

export default SignIn;

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    width: "100%",
    height: "100%",
  },
  topFrame: {
    width: "100%",
    resizeMode: "contain",
    backgroundColor: "red",
    position: "absolute",
    top: 0,
    left: 0,
  },
});

Answer 1

之所以出现这种情况，是因为图像上的 resizeMode 属性，基本上当您使用

resizeMode='contain'

时，它会调整图像大小以在有限的图像尺寸中完全显示它，

如果您希望图像显示时没有红色空格，您应该通过

resizeMode='cover'

，这将确保您的图像完全适合其容器的尺寸，因此无论容器的高度和宽度如何，图像始终适合不留任何空间。