Javascript 如何从本机svg图表沿PieChart组件的周长呈现标签？

以下是我的代码快照：

const data=filteredKeys.map（（键，索引）=>{
返回{
钥匙
值：filteredValues[索引]，
svg:{fill:colors[index]}，
弧：{
外部：70多个filteredValues[索引]+“%”，
焊盘角度：标签===键？0.1:0，
},
onPress:（）=>
setSelectedSlice（{label:key，value:filteredValues[index]}），
};
});
常量标签=（{slices，height，width}）=>{
返回切片.map（（切片，索引）=>{
console.log（slice）；
常数{labelCentroid，pieCentroid，data}=slice；
返回(
{data.key}
);
});
};
返回(
);

结果是：

我希望标签按如下方式对齐：

标签在不同的饼图上看起来非常不一致，这就是为什么我要沿着各自圆弧的曲线渲染标签（首选圆弧的中心）

我尝试了react native svg中的TextPath和TSpan，但是当TextPath是要绘制路径的组件的子组件时，我不知道如何绘制它