javascript - React Native 边框半径渲染

Question

当您在 CSS 中向边框添加边框半径时，边框将围绕边框半径逐渐减小宽度，如您在本例中所见:

.example {
  width: 100px;
  height: 50px;
  background: #000;
  border-bottom: 4px solid red;
  border-bottom-right-radius: 20px;
}

<div class="example"></div>

我试图在 React Native 中做同样的事情，但是 React Native 似乎切断了最后一点:

如您所见，它并没有沿着半径逐渐缩小边界。

让边框像在网络引擎中那样逐渐变细的最佳方法是什么？

Answer 1

遇到了同样的问题，但找不到 borderRadius 样式的解决方案。通过使用两个具有不同高度的 View 解决。但不确定这是否是一个好方法。检查snack用于工作样本。

view1:{        
    width:200,
    height:100,
    backgroundColor:'red',
    borderRadius:10,    
    alignItems:'center'
  },

view2:{
    alignItems:'center',
    justifyContent:'center',
    width:200,
    height:95,
    backgroundColor:'white',
    borderBottomEndRadius:10,
    borderBottomStartRadius:10
  }