如何仅将边框半径用于 1 个角（react-native）？

Posted 2023-02-22

【中文标题】如何仅将边框半径用于 1 个角（react-native）？

【英文标题】：How to use border radius only for 1 corner (react-native)?

【发布时间】：2016-05-22 08:34:28

【问题描述】：

如何在 React Native 中仅对 1 个角使用边框半径？

我有一个模态窗口

正如您所见，底角不是圆角的，当我使用背景颜色作为按钮时会发生这种情况。我试图将溢出隐藏设置为模态包装器，但这对我没有帮助。现在我想对按钮使用边框半径（仅适用于 1 个角）。

我的代码http://jsbin.com/sexeputuqe/edit?html,css

【问题讨论】：

我不知道 reactjs 但你可以使用border-top/bottom-left/right-radius CSS 属性（例如border-bottom-right-radius: 5px）

UI 大问题：“Pressing Cancel will XYZ”，但没有取消按钮。此外，“是”似乎对应于破坏性行为。我强烈建议将按钮标签更改为“丢弃”（也应该在左侧）和“保留”。

你能分享你的代码和元素样式吗？我想我可能知道这里发生了什么。谢谢。

我的代码jsbin.com/sexeputuqe/edit?html,css

对不起，但为了获得您想要的效果，您可以在按钮的父视图中使用overflow: 'hidden'

【参考方案1】：

您是否已经尝试过以下方法？ - borderBottomLeftRadius: 号码 - borderBottomRightRadius: 号码 - borderTopLeftRadius: 号码 - borderTopRightRadius：号码

另外，您可以在the view component docs 找到更多信息。

【讨论】：

是的，我正在尝试，但没有效果。

在您的示例中，如果两个按钮都在问题框中，则需要在按钮和容器上设置边框半径。如果没有，那么使用borderBottomLeftRadius 和borderBottomRightRadius 应该可以解决问题。类似于“否”按钮上的borderBottomLeftRadius: 5 和“是”按钮上的borderBottomRightRadius: 5。如果这不起作用，也许可以向我们提供您的代码示例，以便我们检查是否没有其他干扰。

在 ios 上也不适用于我。只有borderRadius 可以工作，但对所有角都应用半径

@kevin Image 组件 ignores corner specific radius settings 的 iOS 版本。在某些情况下，您可以使用负边距来“掩盖”您不希望圆角的角。

尝试将overflow:hidden 放到您的视图（或文本）中。它应该可以工作。

【参考方案2】：

在您的样式中添加以下属性：

borderBottomLeftRadius: number borderBottomRightRadius: number borderTopLeftRadius: number borderTopRightRadius: number

这对我有用。

谢谢

【讨论】：

为答案添加更多解释。

@DanielJosePadillaPeña，您找到解决方案了吗？

硬编码，添加另一个没有角的图像，隐藏半径。不是一个好方法，但还是找到了另一种解决方案。

它适用于我，当我添加溢出：“隐藏”属性

谁能区分“borderTopStartRadius”和“borderTopLeftRadius”？

【参考方案3】：

假设Image标签的左上角和左下角只设置了半径。

<View style=styles.imgBox>
  <Image source= uri: 'your image url'  style=styles.img />
</View>

 const styles = EStyleSheet.create(
 imgBox: 
       width: px(72),
       height: px(72),
       borderBottomLeftRadius: 2,
       borderTopLeftRadius: 2,
       overflow: 'hidden',
 ,
 img: 
       width: px(72),
       height: px(72),
  ,
)

在 ios 上看起来不错。

【讨论】：

不完整 - 您能否添加所需的 npm 包和缺少的 import 语句？