Как сделать так, чтобы текст центрировался по центру круга с помощью реакции нативного svg? - PullRequest
Новая
       13

Как сделать так, чтобы текст центрировался по центру круга с помощью реакции нативного svg?

0 голосов
/ 19 сентября 2019

Это просто, но я немного растерялся.

Как сделать текст посередине (по вертикали и по горизонтали) круга?Или все в середине Svg (и тогда текст будет в середине круга) 

const size = width < height ? width - 32 : height - 16
const strokeWidth = 25
const radius = (size - strokeWidth) / 2
const circunference = radius * 2 * Math.PI

return (
    <Svg width={width} height={size}>
        <Text>
            Hey
        </Text>
        <Circle
            stroke="#2162cc"
            fill="none"
            cx={size / 2}
            cy={size / 2}
            r={radius}
            strokeDasharray={`${circunference} ${circunference}`}
            {...{ strokeWidth, strokeDashoffset }}
        />
    </Svg>
)

Ответы [ 2 ]

1 голос
/ 19 сентября 2019

Вам нужно будет использовать Text компонент из react-native-svg, как показано ниже.Надеюсь, это поможет 

import React, { Component } from "react";
import Svg, { Circle, Text } from "react-native-svg";

class Demo extends Component {
  render() {
    const width = 100;
    const height = 100;
    const size = width < height ? width - 32 : height - 16;
    const strokeWidth = 25;
    const radius = (size - strokeWidth) / 2;
    const circunference = radius * 2 * Math.PI;

    return (
      <Svg width={width} height={size}>
        <Text
          stroke="purple"
          fontSize="15"
          x={size / 2}
          y={size / 2}
          textAnchor="middle"
        >
          Hey
        </Text>
        <Circle
          stroke="#2162cc"
          fill="none"
          cx={size / 2}
          cy={size / 2}
          r={radius}
          strokeDasharray={`${circunference} ${circunference}`}
        />
      </Svg>
    );
  }
}

export default Demo;
0 голосов
/ 19 сентября 2019

Оберните верхний SVG-элемент в элементе View, затем используйте абсолютную позицию, чтобы расположить круг, чтобы он выступал в качестве фона (добавьте 'padding', используя top: 3, left: 3, если вам нужно добавить отступ, чтобы круг не вырезался).

Установите alignItems:'center', justifyContent: 'center' на самом внешнем элементе вида, чтобы выровнять текст по центру вида.

Пример 

<View style={{alignItems: 'center', justifyContent: 'center'}}>
    <View style={{position: 'absolute'}}>
      <Svg width={width} height={size} >
          <Circle
              stroke="#2162cc"
              fill="none"
              cx={size / 2}
              cy={size / 2}
              r={radius}
              strokeDasharray={`${circunference} ${circunference}`}
              {...{ strokeWidth, strokeDashoffset }}
          />
      </Svg>
      <Text>
         Hey
      </Text>
   </View>
</View>

Примечание

Это решение будет работать для любого типа элемента, который вы хотите центрировать, независимо от его сложности, а не только для простого текста.

...