如何为React Native Elements的Avatar组件设置边框及边框颜色？

我太懂这种找不到解决方案快要崩溃的心情了！别慌，其实问题特别简单——你大概率漏掉了borderWidth这个关键属性！默认情况下边框宽度是0，哪怕你设置了borderColor和borderStyle，也根本看不到边框效果😮‍💨

问题出在哪？ #

你尝试了iconStyle、containerStyle、avatarStyle，但：

• iconStyle只在你用图标（比如icon={{name: 'user'}}）作为Avatar内容时才生效，你用的是图片source，所以这个样式完全没用；
• containerStyle是控制整个Avatar外层容器的样式，如果你想给容器加边框可以用，但你要的是头像本身的边框，得用avatarStyle；
• 最重要的是，你所有的样式里都没加borderWidth，没有宽度的边框自然不会显示！

正确的代码写法 #

直接给avatarStyle加上borderWidth就行，完整代码如下：

<Avatar
  medium
  rounded
  source={{ uri: this.props.profile[0].profile_picture }}
  onPress={this.toggleModal.bind(this)}
  avatarStyle={{
    borderWidth: 2, // 必须设置这个值，比如2px
    borderColor: 'white',
    borderStyle: 'solid'
  }}
/>

额外说明 #

因为你用了rounded属性，头像已经是圆角了，边框会自动跟着变成圆角，不需要额外设置borderRadius哦～

内容的提问来源于stack exchange，提问作者qwertyball