视图上的弯曲底部

问题描述

如何在 react-native 中将弯曲的底部添加到视图中?参见曲线示例

How can i add the curved bottom to a View in react-native? See curved example

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

I'f tried to a add an second view like this:

头部底部:{宽度:宽度/2，高度:宽度/2，背景颜色:'红色'，位置:'绝对'，底部:-35，左:宽度/4 - 15，边界半径:宽度/4，转换: [{scaleX:2}，{scaleY:0.25}]},

headerBottom: { width: width / 2, height: width / 2, backgroundColor: 'red', position: 'absolute', bottom: -35, left: width / 4 - 15, borderRadius: width / 4, transform: [ {scaleX: 2}, {scaleY: 0.25} ] },

我已经能够在同一个视图中找到一个不那么糟糕的解决方案，而不是第二个视图中的示例.

I've been able to get above but rather have a less bad solution right in the same view, not as in the example in a second view.

推荐答案

我最终使用了 react-native-svg.:

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

这篇关于视图上的弯曲底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！