如何在 React Native 中基于道具创建边框半径

Question

我有一个对勾图标，我正在尝试在其中创建一个圆形背景填充。如何正确创建大小为 svg 图标一半的边框半径？我试过使用 border radius: 50% 这在 React Native 中不起作用，并且还尝试将道具的宽度和高度除以 2 但我认为我这样做不正确。

目前看起来是这样的：

import React from 'react';
import Svg, { Path } from 'react-native-svg';
import styled from 'styled-components/native';

const TickIcon = ({ width = 16, height = 13 }) => (
  <Container>
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      overflow="visible"
      preserveAspectRatio="none"
      width={width}
      height={height}>
      <Path
        d="M14.2 0L5.882 8.986 2 4.821 0 6.904 5.682 13 16 1.931 14.2 0z"
        vectorEffect="non-scaling-stroke"
        fill="#fff"
        // fill="#d41f3a"
      />
    </Svg>
  </Container>
);

export default TickIcon;

const Container = styled.View`
  align-self: flex-start; 
  /* width: ${props => props.width / 2};  */
  /* height: ${props => props.height / 2};  */
  /* border-radius: 50%; */
  padding: 5px;
  justify-content: center;
  align-items: center;
  background-color: #d41f3a;

`;

Answer 1

在 <path> 之前添加一个 <circle> 元素。设置它的半径（r）为高度/2，cx为宽度/2，cy为高度/2：

<svg width="16" height="16">
  <circle r="8" cx="8" cy="8" fill="red" />
  <path d="M14.2 0L5.882 8.986 2 4.821 0 6.904 5.682 13 16 1.931 14.2 0z" fill="#fff" />
</svg>

如何在 React Native 中基于道具创建边框半径

How to create a border radius based off props in react native

svg

reactjs

react-native

styled-components