React native 如何使文本集中在一个圆的中间，反应本地SVG？

这个很简单，但我有点迷路了

如何使圆周中的文字垂直和水平？或者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>
)

您必须使用react原生svg中的文本组件，如下所示。希望这有帮助

从React导入React，{Component}； 从本地Svg导入Svg，{Circle，Text}； 类Demo扩展了组件{ 渲染{ 常数宽度=100； 常数高度=100； 常数大小=宽度<高度？宽度-32：高度-16； 常数冲程宽度=25； 常数半径=尺寸-冲程宽度/2； 常数circunference=半径*2*Math.PI； 回来 嘿 ; } } 导出默认演示；

---

将顶部SVG元素包装在视图元素中，然后使用position absolute（绝对位置）将圆定位为背景添加“padding”（填充）使用top:3，left:3，如果需要一些填充以避免切掉圆

在最外部的视图元素上设置alignItems:'center'，justifyContent:'center'，将文本与视图的中心对齐

实例 笔记

---

此解决方案适用于您想要居中的任何类型的元素，无论有多复杂，而不仅仅是简单的文本。

如果您希望Hey文本位于圆圈组件内，则必须将其作为子元素放置在圆圈中，然后将其保持在中心，您可以使用css alignItems:“center”，justifyContent:“center”。。。。。。否则，您将不得不使文本组件位置：绝对非绝对Recommended@MilindAgrawal你能提供一个完整的例子吗？不知道你的评论是什么意思如果你能创建一个演示链接，也许我可以进行更改并与你分享。@MilindAgrawal你需要的一切都在问题中，很简单，一切都来自于本机svg

<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>