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似乎切断了最后一点:

正如您所看到的那样,它不会沿着半径逐渐变细.

什么是最好的方法让边界逐渐减少像在Web引擎中一样？

Answer 1

遇到同样的问题,找不到borderRadius样式的解决方案.通过使用两个不同高度的视图解决.但不确定这是否是一个好方法.检查零食是否有工作样品.

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
  }