如何在React Native中实现Cred风格(NeoPop)按钮？解决skewY安卓兼容问题

我在实现立体凸起效果时使用了skewY:45deg，但该属性在Android端无效，仅在Web端正常工作。请问有什么可行方案实现这类设计？

样式参考代码：

buttonEdgeRight: {
  backgroundColor: disabled
    ? colorConfig?.disabledColors?.edgeColors?.right ?? "transparent"
    : colorConfig?.edgeColors?.right ?? "transparent",
  height:
    Platform.OS === "web"
      ? `calc(100% - ${EDGEWIDTH}px)`
      : layout.height - EDGEWIDTH / 2,
  right: 0,
  top: 0,
  transform: getTransform([{ translateZ: 0 }, { skewY: "45deg" }]),
  width: EDGEWIDTH,
  zIndex: 2,
},
buttonEdgeRightPressed: {
  transform:
    disabled || shouldNotMoveBottomEdge(elevationDirection)
      ? [{ skewY: `${SKEW_ANGLE}deg` }]
      : getTransform([
        { translateX: EDGEWIDTH },
        { translateY: EDGEWIDTH },
        { translateZ: 0 },
        { skewY: `${SKEW_ANGLE}deg` },
      ]),
},

可行替代方案 #

由于React Native Android端对skewY变换支持有限，可通过以下几种方式实现同款视觉效果：

1. 线性渐变模拟斜切边缘

用渐变替代变换，直接在元素背景上生成斜切的颜色边界，全端兼容：

buttonEdgeRight: {
  backgroundColor: disabled
    ? colorConfig?.disabledColors?.edgeColors?.right ?? "transparent"
    : colorConfig?.edgeColors?.right ?? "transparent",
  height: layout.height,
  right: 0,
  top: 0,
  width: EDGEWIDTH,
  zIndex: 2,
  // 用45度渐变模拟斜切效果
  backgroundImage: `linear-gradient(45deg, transparent ${EDGEWIDTH}px, ${disabled ? (colorConfig?.disabledColors?.edgeColors?.right ?? "transparent") : (colorConfig?.edgeColors?.right ?? "transparent")} ${EDGEWIDTH}px)`,
},

2. SVG绘制精准斜切形状

用React Native SVG组件绘制符合需求的斜切多边形，完全自定义形状且无兼容问题：

import Svg, { Polygon } from 'react-native-svg';

// 自定义斜切边缘组件
const SkewedEdge = ({ color, width, height }) => {
  // 45度斜切的多边形顶点坐标
  const points = `0,0 ${width},${width} ${width},${height} 0,${height - width}`;
  return (
    <Svg width={width} height={height} style={{ position: 'absolute', right: 0, top: 0 }}>
      <Polygon points={points} fill={color} />
    </Svg>
  );
};

// 在按钮组件中引入
<Button style={buttonContainer}>
  {/* 按钮内容 */}
  <SkewedEdge 
    color={disabled ? (colorConfig?.disabledColors?.edgeColors?.right ?? "transparent") : (colorConfig?.edgeColors?.right ?? "transparent")}
    width={EDGEWIDTH}
    height={layout.height}
  />
</Button>

3. 旋转+尺寸调整模拟斜切

利用Android支持更好的rotate变换，配合元素尺寸、位置调整实现视觉斜切：

buttonEdgeRight: {
  backgroundColor: disabled
    ? colorConfig?.disabledColors?.edgeColors?.right ?? "transparent"
    : colorConfig?.edgeColors?.right ?? "transparent",
  height: layout.height + EDGEWIDTH,
  right: -EDGEWIDTH / 2,
  top: -EDGEWIDTH / 2,
  width: EDGEWIDTH * 1.414, // 45度旋转后所需的宽度（√2≈1.414）
  zIndex: 2,
  transform: getTransform([{ rotate: '45deg' }]),
},

内容的提问来源于stack exchange，提问作者Vuyyururajashekar Reddy