有没有办法在 React Native App 中围绕一个点创建弯曲视图（或类似视图）？

Question

我正在尝试在 React Native 中重新创建我在一系列（见下图）中看到的应用程序屏幕。现在我有点坚持创建在其中包含弯曲文本的弯曲视图（arcs）。这些弧线应该能够沿着它们的路径从顶部开始动画，环绕左上角的圆圈。 CSS 似乎是不可能的，因为弯曲 div 本身就很困难。 SVG 可能是一个选项，但我不知道如何设置它们以动态设置弧的长度或它们的高度，如果文本是 longer/shorter。

如果有办法做到这一点，请告诉我。我可以尝试的任何想法都已经有所帮助。

这也不一定是完美的。这只是我在空闲时间编码的东西，所以任何近似值都绰绰有余。

Answer 1

正如 Atmas 在评论中所说，SVG 是正确的选择。

我在 this question 中找到了一些以编程方式生成 SVG Arcs 的代码。

所以我的代码对于任何感兴趣的人来说都是这样的：

<Svg>
   <Path d={describeArc(0, 0, 235, 90, 173)} fill="none" stroke="#fff" strokeWidth="54" strokeLinecap="round" id={`msg${index}`} />
   <Path d={describeArc(0, 0, 235, 90, 173)} fill="none" stroke="#F1E059" strokeWidth="50" strokeLinecap="round" />
   <Text fill="#446688" fontSize="18" dy="7" >
       <TextPath href={`#msg${index}`} startOffset="10px" >
           {msg}
       </TextPath>
   </Text>
</Svg>

结果是：

有没有办法在 React Native App 中围绕一个点创建弯曲视图（或类似视图）？

Is there a way to create curved Views (or similar) around a point in a React Native App?

css

svg

typescript

react-native

expo