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

【问题标题】：Is there a way to create curved Views (or similar) around a point in a React Native App?有没有办法在 React Native App 中的某个点周围创建弯曲视图（或类似视图）？
【发布时间】：2021-11-18 13:37:19
【问题描述】：

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

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

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

【问题讨论】：

我认为您正在使用 svgs。看看这个项目中的 TextPath。 github.com/react-native-svg/react-native-svg
谢谢 :) 我今天修改了 SVG 路径，我觉得这可能会很好用。我会用我目前的答案发布答案

标签： css typescript react-native svg expo

【解决方案1】：

正如 Atmas 在 cmets 中所说，SVG 是必经之路。

我在this question 中找到了一些以编程方式生成 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>

结果如下：

【讨论】：

不错！很高兴它成功了，你发布了一个最小的例子，所以我们都过得更好！