css - 有没有办法在 React Native App 中的某个点周围创建弯曲视图（或类似视图）？

Question

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

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

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

标签： csstypescriptreact-nativesvgexpo

Answer 1

正如 Atmas 在评论中所说，SVG 是要走的路。

我在这个问题中找到了一些以编程方式生成 SVG 弧的代码。

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

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

结果是：