包围反应原生矢量图标

Question

我想包围react-native-vector图标。我在样式中添加了边框半径，但它对所有设备都没有帮助，并且每个图标的行为都不同。

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

链接以反应原生矢量图标： https://oblador.github.io/react-native-vector-icons/

Answer 1

尝试将其作为容器包装在View内

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

当然，将宽度和高度更改为您自己的偏好。

Answer 2

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

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