向 Circle 添加遮罩道具时应用程序崩溃

Question

我正在尝试 'copy' 这个 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

可以看到propshere。其他使用但未在上面列出的道具有后备。

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

向 Circle 添加遮罩道具时应用程序崩溃

App crashes when adding mask prop to Circle

react-native

react-native-svg