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

Question

这是我的代码的快照：

  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。