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>

也许我对它的描述不够好，所以下面是我要实现的目标的图片：

注意：虚线部分是图像的一部分，实际上是从全图显示的。

非常感谢您！

Answer 1

使用宽度和高度'100％'来获取您想要的图像，因为图像将填充所有可用空间，A建议使用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>

您将获得类似的信息：

Answer 2

如果您想在输入选项时翻译图像：resizeMode="cover"，您可以通过以下方式翻译： translateX = 大小（在 reactJS 中）<=>

<View style={{flex: 1,
        position: 'relative',
        width: width - 20,
        height: height / 3,
        borderRadius: 10,
        shadowColor: "#000",
        shadowOffset: { width: .5, height: .5 },
        shadowOpacity: .5,
        shadowRadius: 3,
        elevation: 5,
        margin: 10}}>
            <View style={{width: 400,
                height: "100%",
                borderRadius: 10,
                overflow: 'hidden',
                flex: 1 }}
            >
                <Image 
                resizeMethod="cover" 
                style={{ paddingTop: 500, width: 400, height: '100%' }} 
source={{uri: "https://f39zpg.zdn.vn/7941473480683381577/74807d444750b50eec41.jpg" }} 
                />
            </View> 

        </View >

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

= 大小（在 css reactNative 中）。 它对我有用。

希望对你有帮助！

“安达陈”