如何在React Native中实现clip-path图像裁剪效果

在CSS中，要实现如图所示的图像裁剪效果，可编写如下代码：

CSS实现代码 #

img {
    clip-path: polygon(0 0, 100% 0, 100% 64%, 0% 100%);
}

HTML结构 #

<img alt="image" src="https://placehold.co/400x300/orange/white">

但React Native的<Image>组件并不支持clip-path属性，要实现相同效果，可通过以下方式：

React Native实现方案：使用SVG裁剪 #

借助react-native-svg库，通过SVG的裁剪路径功能可以实现完全一致的效果，步骤如下：

1. 安装依赖

npm install react-native-svg
# 或 yarn add react-native-svg

2. 固定尺寸裁剪组件

import React from 'react';
import Svg, { ClipPath, Polygon, Defs, Image as SvgImage } from 'react-native-svg';

const ClippedImage = () => {
  return (
    <Svg width="400" height="300">
      <Defs>
        {/* 定义和CSS中一致的多边形裁剪路径 */}
        <ClipPath id="clipPath">
          <Polygon points="0,0 400,0 400,192 0,300" />
        </ClipPath>
      </Defs>
      <SvgImage
        href="https://placehold.co/400x300/orange/white"
        width="400"
        height="300"
        clipPath="url(#clipPath)"
      />
    </Svg>
  );
};

export default ClippedImage;

3. 自适应尺寸裁剪组件
   如果需要适配不同屏幕或图片尺寸，可以动态计算裁剪坐标：

import React from 'react';
import { useWindowDimensions } from 'react-native';
import Svg, { ClipPath, Polygon, Defs, Image as SvgImage } from 'react-native-svg';

const ClippedImage = ({ imageUrl, width, height }) => {
  const screenWidth = useWindowDimensions().width;
  // 自定义默认尺寸，可通过props传入指定值
  const imgWidth = width || screenWidth * 0.8;
  const imgHeight = height || (imgWidth * 3) / 4;
  // 对应CSS中100% 64%的位置，计算为图片高度的64%
  const bottomRightY = imgHeight * 0.64;

  return (
    <Svg width={imgWidth} height={imgHeight}>
      <Defs>
        <ClipPath id="dynamicClip">
          <Polygon points={`0,0 ${imgWidth},0 ${imgWidth},${bottomRightY} 0,${imgHeight}`} />
        </ClipPath>
      </Defs>
      <SvgImage
        href={imageUrl}
        width={imgWidth}
        height={imgHeight}
        clipPath="url(#dynamicClip)"
      />
    </Svg>
  );
};

export default ClippedImage;

这样就能实现和CSS中完全一致的图像裁剪效果。

内容的提问来源于stack exchange，提问作者Ng Lok Chun