reactjs - React Native Image resizeMode : cover with bottom positioning

Question

大家好，我有图像定位问题。我想实现像 resizeMode="cover"+ background-position: "bottom"一样定位我的图像。因此，如果图像溢出，我需要让图像从屏幕底部绘制并从侧面和顶部“裁剪”。这样的事情甚至可能吗？我目前的代码是:

<View style={{
  height: ILLUSTRATION_HEIGHT,
  width: ILLUSTRATION_WIDTH,
  position: "relative",
  overflow: "hidden"
}}>
    <Image
      width={ILLUSTRATION_WIDTH}
      height={ILLUSTRATION_HEIGHT}
      resizeMode="cover"
      source={{ uri: "illustration" }}
      style={{
        position: "absolute",
        bottom: 0,
        width: "100%",
        height: "100%"
        }}
      />
</View>

也许我没有很好地描述它，所以这里是我想要实现的目标的图片:



注:虚线部分是Image的部分，实际是全图显示。

非常感谢!

Answer 1

但是使用宽度和高度“100%”你不能完全得到你想要的，因为图像将填充所有可用空间，建议使用 backgroundColor 或 ctrl+D 和“切换检查器”调试你的用户界面，然后检查在你看来究竟发生了什么。这是响应您需求的一段代码(右图“我需要什么”):

<View
        style={{
          height: 150,
          width: 150,
          position: 'relative',
          overflow: 'hidden',
          backgroundColor:'red',
          alignItems:'center'
        }}>
        <Image

          resizeMode="cover"
          source={{ uri: 'https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' }}
          style={{
            position: 'absolute',
            bottom: 0,
            width: '90%',
            height: '90%',
          }}
        />
      </View>

你会得到这样的东西: