反应原生边界半径渲染

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样式的解决方案。通过使用两个不同高度的视图解决。但是不确定这是否是一个好方法。检查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
  }

Answer 2

因为您刚刚设置了一个 bottom 边框，所以您的边框被剪掉了。还尝试应用具有相同宽度和颜色的 left 和 right 边框，它会正常工作。

自然直觉会让你认为角落应该是视图“顶部”的一部分，但它们实际上是侧面。