React Native Image resizeMode：覆盖底部定位

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和“切换检查器”调试您的UI，然后检查到底是什么发生在你的视野中。这是满足您需求的代码片段（右图“我需要什么”）：

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

你会得到类似的东西：