边界半径出乎意料地不均匀

Question

我有一个带有图标的视图（来自react-native-vector-icons），如下所示：

  return (
    <View style={styles.iconContainerStyle}>
      <Icon name='menu' size={23} style={styles.iconStyle} />
    </View>
  );

以下是两个组件的样式：

const styles = {
  iconContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 30,
    width: 35,
    borderRadius: 5,
    backgroundColor: '#ffffff',
    padding: 2
  },
  iconStyle: {
    color: '#2279b4',
  }
}; 

奇怪的是，5的边界半径支柱应该给出均匀的圆形边框，但这是我得到的： 请注意，在右侧，边框比左侧部分更锐利！

我甚至尝试过使用不同的borderRaduis值，它仍然是相同的概念。

Answer 1

你看到的标题是由我的场景的react-native-router-flex提供的，我认为这也是一个因素，因为它们的样式也适用于汉堡包按钮。

解决（临时）是通过提供以下样式的另一个父视图：

  <View style={{ justifyContent: 'center', alignItems: 'center', height: 35, width: 40, }}>

高度和宽度需要大于iconContainer的值。

Answer 2

请在代码中添加border: 1px solid #f00;，以查看切换图标是否隐藏在某些内容之后。

如果看起来很好，请尝试为每个角度添加单独的半径，例如：

border-top-left-radius: 5px;
border-top-right-radius: 5px;

等等。另外，请尝试将border-radius样式与!important一起使用。