0

我正在尝试“复制”这个 https://codepen.io/dannyb9737/pen/jQJZWO

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

进入 react-native，但只有在我在 Circle 组件中添加 mask 道具后应用程序才会崩溃，这是我的代码（将它与 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”，

谢谢！

4

1 回答 1

1

这是一个用户遇到相同错误的 Github 问题。

正如有人建议的那样，您可能没有提供正确的道具<Mask />

查看源代码，它期望：

  • name
  • x,
  • y
  • height

你可以看到props 这里。其他使用但未在上面列出的道具有备用。

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

于 2018-12-03T14:49:15.460 回答