如何在React Native中绘制带黑色边框的非完美圆形半圆弧

要实现这种带黑色边框的非完美圆形半圆弧，且在手机/平板上保持高度一致，用SVG绘制自定义路径是最靠谱的办法，完全避开Icon和常规View的局限性：

Web端实现 #

直接用SVG标签绘制，固定高度，宽度自适应，通过贝塞尔曲线控制圆弧形状：

<svg width="100%" height="80" viewBox="0 0 200 80" preserveAspectRatio="xMidYMin meet">
  <!-- 调整Q后面的控制点坐标，就能得到你要的非完美圆弧 -->
  <path d="M10,80 Q100,0 190,80" 
        fill="none" 
        stroke="black" 
        stroke-width="2"/>
</svg>

• height设为你需要的固定值，确保跨设备高度一致
• viewBox和preserveAspectRatio保证宽度自适应时，圆弧形状不变
• 修改Q后的坐标（比如把100,0改成110,10），就能调整圆弧的弧度，做出非完美的效果

React Native端实现 #

借助react-native-svg库实现同样逻辑，先安装依赖：

npm install react-native-svg

然后在组件中使用：

import Svg, { Path } from 'react-native-svg';

// 嵌入到你的布局里
<Svg height={80} width="100%" viewBox="0 0 200 80" preserveAspectRatio="xMidYMin meet">
  <Path
    d="M10,80 Q100,0 190,80"
    fill="transparent"
    stroke="black"
    strokeWidth={2}
  />
</Svg>

原理和Web端一致，固定height保证跨设备高度统一，通过调整路径参数自定义圆弧形状。

内容的提问来源于stack exchange，提问作者KAT