css - 边界半径意外地不均匀

Question

我有一个带有图标(来自 react-native-vector-icons)的 View ，如下所示:

  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',
  }
}; 

奇怪的是 border radius 属性 5 应该给出均匀的圆形边界，但这是我得到的: 请注意，在右侧，边框比左侧更清晰!

我什至尝试了不同的 borderRaduis 值，它仍然是相同的概念。

Answer 1

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

解决方法(暂时)是通过提供具有以下样式的另一个父 View :

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

高度和宽度的值必须大于 iconContainer 的值。