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 引擎中一样逐渐变细呢？

- Melvin Koopmans

---

对于IOS，您只需要将overflow: hidden添加到您的样式中即可。 - Pritish Vaidya

Answer 1

我曾经遇到同样的问题，使用borderRadius样式无法解决。后来通过使用两个高度不同的View来解决了这个问题。但是我不确定这种做法是否可行。可以查看这个示例来测试。

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
  }

- Dinith Minura

---

我会在等待其他解决方案的同时记住这个。我想将此效果用于各种元素，这将导致相当多的额外编码和可能需要特定于元素的调整，而我宁愿避免这种情况。 - Melvin Koopmans

当然，@MelvinKoopmans，可能还有更好的解决方案。如果我们可以对样式进行具体的调整，那会更好。 - Dinith Minura

Answer 2

你的边框剪辑了，因为你刚刚设置了一个底部边框。尝试同时应用相同宽度和颜色的左侧和右侧边框，它将正常工作。

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

- Darius Mandres