reactjs - React Native Image resizeMode：底部定位覆盖

问题描述

大家好，我的图像定位有问题。我想实现将我的图像定位为 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>

也许我描述得不够好，所以这里是我想要实现的目标的图片：

注：虚线部分为图片部分，实际为全图显示。

太感谢了！

标签： reactjsreact-native

通过使用 width 和 height '100%' 你不能得到你想要的，因为图像会填满所有可用空间，我建议使用 backgroundColor 或 ctrl+D 和'toggle inspector' 调试你的 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>

你会得到类似的东西：

reactjs - React Native Image resizeMode：底部定位覆盖

问题描述

解决方案

推荐阅读