将react-native-vector-icons圈起来

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原生矢量图标的链接：https://oblador.github.io/react-native-vector-icons/

​

​

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"
}} />

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>

当然，可以根据自己的喜好更改宽度和高度。