环绕React Native矢量图标

Question

我想要在react-native-vector图标周围加上圆角。我在样式中添加了边框半径，但它对于所有设备都没有帮助，而且每个图标的表现也不同。

    <Icon  name={'ios-grid-outline'} style={{ color: "rgb(170, 207, 202)", 
 borderRadius:10,
  borderWidth: 2,
  borderColor: 'rgb(170, 207, 202)',
}} />

React Native矢量图标链接： https://oblador.github.io/react-native-vector-icons/

- devedv

---

你能描述一下你期望的行为和实际的行为吗？ - ThinkAndCode

Answer 1

尝试将 overflow:"hidden" 选项添加到您的样式中。

<Icon  name={'ios-grid-outline'} style={{ 
  color: "rgb(170, 207, 202)", 
  borderRadius:10,
  borderWidth: 2,
  borderColor: 'rgb(170, 207, 202)',
  overflow: "hidden"
}} />

- Nikollai Hernandez

Answer 2

尝试将其包装在一个View中作为容器

<View 
    style={{
        width: 10, 
        height: 10, 
        borderRadius: 5, 
        borderWidth: 2, 
        borderColor: 'rgb(170, 207, 202)'
    }}>
    <Icon name={'ios-grid-outline'} style={{...}} />
</View>

当然，将宽度和高度更改为您自己喜欢的尺寸。

- Srdjan Cosic

---

尽管您的答案可能是解决问题的一种方法，但Icon组件很可能来自于像问题所建议的react-native-vector-icons库。 - bennygenel

好的，谢谢指出，我会更新我的回答以更具体地描述。 - Srdjan Cosic

谢谢，但在不同的屏幕尺寸上显示不同。我必须根据屏幕方向调整高度和宽度。甚至在某些屏幕上，图标会从圆心移出。我已经添加了上面的图片。 - devedv

你是如何调整组件的高度和宽度的？ - Srdjan Cosic