Приложение вылетает при добавлении маски в круг

Question

Я пытаюсь «скопировать» это https://codepen.io/dannyb9737/pen/jQJZWO

Я также пытался воспроизвести его в песочнице - https://snack.expo.io/Bk-s-2MyN, но кажется, что Маска компонента не определена: (

, чтобы работать в реагирующе-родном, но приложение продолжает падать только после того, как я добавляю маску в компонент Circle, вот мой код (смешивая его со стилевым компонентом).

идеяза всем этим стоит создать компонент, который получит число и будет заполнять точное число тиков как аргумент.

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, "реагировать": "16.5.0 "," Reaction-native ":" 0.57.2 "," Reaction-native-svg ":" ^ 8.0.8 ",

спасибо!

Answer 1

Вот проблема Github, когда пользователь получает ту же ошибку.

Как кто-то предположил, вы, возможно, не предоставляете правильные реквизиты для <Mask />

Глядя на исходный код, он ожидает:

• name
• x,
• y
• height

Здесь вы можете увидеть props здесь .Другие реквизиты, которые используются, но не перечислены выше, имеют запасные варианты.

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