react-native – 视图上的弯曲底部

如何在反应原生的视图中添加弯曲的底部？ See curved example

我试图添加第二个这样的视图：

headerBottom：{
    宽度：宽度/ 2,
    高度：宽度/ 2,
    backgroundColor：’red’,
    位置：’绝对’,
    底部：-35,
    左：宽度/ 4 – 15,
    borderRadius：width / 4,
    转变： [
      {scaleX：2},
      {scaleY：0.25}
    ]
  },

我已经能够在同一个视图中获得更好但更糟糕的解决方案,而不是在第二个视图中的示例中.

我最终使用了react-native-svg：

<Circle
  cx={screenWidth / 2}
  cy={`-${898 - headerHeight + 2}`}
  r="898.5"
  fill="#EFF2F3"
  stroke="#C5CACD"
  strokeWidth="2"
/>