如何从 react-native-svg-charts 沿 PieChart 组件的圆周呈现标签？

如何解决如何从 react-native-svg-charts 沿 PieChart 组件的圆周呈现标签？

这是我的代码的快照：

  const data = filteredKeys.map((key,index) => {
    return {
      key,value: filteredValues[index],svg: { fill: colors[index] },arc: {
        outerRadius: 70 + filteredValues[index] + '%',padAngle: label === key ? 0.1 : 0,},onPress: () =>
        setSelectedSlice({ label: key,value: filteredValues[index] }),};
  });

  const Labels = ({ slices,height,width }) => {
    return slices.map((slice,index) => {
      console.log(slice);
      const { labelCentroid,pieCentroid,data } = slice;
      return (
        <Text
          key={index}
          x={labelCentroid[0]}
          y={labelCentroid[1]}
          fill={'#000'}
          textAnchor={'middle'}
          alignmentBaseline={'center'}
          fontSize={14}
          stroke={'black'}
          strokeWidth={0.2}
        >
          {data.key}
        </Text>
      );
    });
  };

  return (
    <View style={styles.container}>
      <PieChart
        style={{ height: 300 }}
        outerRadius={'100%'}
        innerRadius={'10%'}
        data={data}
        labelRadius={'85%'}
      >
        <Labels />
      </PieChart>
    </View>
  );

结果如下：

我想像这样对齐标签：

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

我已经尝试过 react-native-svg 中的 TextPath 和 Tspan，但是当 TextPath 是要沿其绘制路径的组件的子项时，我无法弄清楚如何绘制它。