Question

我正在尝试“复制”此内容 https://codepen.io/dannyb9737/pen/jQJZWO

我也试图在沙盒中重现它- https://snack.expo.io/Bk-s-2MyN 但似乎组件掩码未定义：（

可以工作于react-native，但是只有在我将Circle组件中添加了mask prop之后，应用程序才会崩溃，这是我的代码（将其与styled-component混合）。

所有这些背后的想法是创建一个组件，该组件将获取一个数字，并将其填充为arg的精确刻度数。

const circleSize = 200;

const Container = styled.View`
  margin: 50px auto;
  position: relative;
  width: ${circleSize}px;
  height: ${circleSize}px;
  border-radius: ${circleSize/2}px;
  background-color: #f6b800;
  overflow: hidden;
`;

const ModifiedCircle = styled(Circle).attrs({
  strokeWidth: "10",
  strokeLinecap: "butt",
  fill: "transparent",
  strokeDasharray: "2.236 3",
  cx: "50",
  cy: "50",
  r: "50"
})``;

const ClockWithTicks = () => (
  <Container>
    <Svg height={circleSize} width={circleSize} viewBox="0 0 100 100">
      <Defs>
        <Mask id="mask">
          <ModifiedCircle
            strokeDashoffset="30"
            strokeDasharray="314.15 314.15"
            stroke="#000"
            transform="rotate(-90.5 50 50)"
          />
        </Mask>
      </Defs>
      <ModifiedCircle stroke="#fff" />
      <ModifiedCircle stroke="#000" mask="url(#mask)" />
    </Svg>
  </Container>
);

我正在使用android模拟器， “ react”：“ 16.5.0”， “ react-native”：“ 0.57.2”， “ react-native-svg”：“ ^ 8.0.8”，

谢谢！

Answer 1

Here's是Github问题，用户遇到相同的错误。

按照某人的建议，您可能没有为<Mask />

提供正确的道具

查看源代码，它期望：

name
x，
y
height

您可以看到props here。上面未使用但未列出的其他道具都有后备功能。

<Mask name="mask" x={0} y={0} height={100}>...</Mask>

将蒙版道具添加到Circle时，应用崩溃

1 个答案: