在 Avatar 组件周围有一个圆圈

Question

在我的 react-native 项目中，我使用 react-native-elements 库渲染一个 Avatar 圆形组件。如下所示：

<Avatar
  size="small"
  rounded
  title="MT"
  activeOpacity={0.7}
/>

上面的代码呈现了这样一个圆：

现在我需要在上面的 Avatar 周围画一个绿色圆圈，使 Avatar 看起来像周围有一个绿色粗边框。如何实现？

====更新====

我试过了：

<Avatar
  size="small"
  rounded
  title="User"
  avatarStyle={{
    borderWidth: 3,
    borderColor: 'green',
  }}
/>

在 iOS 上看起来像：

在 Android 上看起来像：

所以，在 Android 上它看起来不像一个圆形边框，如何在 Android 上解决这个问题？

Answer 1

您可以在头像上使用 avatarStyle 道具。这会为底层图像添加样式。制作 1px 实心绿色边框的示例：

  <Avatar
    size="small"
    rounded
    title="MT"
    activeOpacity={0.7}
    avatarStyle={{ borderWidth: 1, borderColor: 'green', borderRadius: 5, borderStyle:'solid' }}
  />

Answer 2

proxidem 的确切解决方案对我不起作用。边界没有延伸到角落。这对我有用：

<Avatar
  size="small"
  rounded
  title="User"
  avatarStyle={{
    borderWidth: 1,
    borderColor: 'green',
    ...Platform.select({
       android: {
          borderTopWidth: 0,
          borderLeftWidth: 0,
          borderRightWidth: 0,
          borderBottomWidth: 0,
       },
    }),
  }}
/>

对于尝试此解决方案的其他人。如果文本不适合，请选择一个不超过 2 个字符的单词，或者添加 titleStyle 属性并更改 fontSize:

titleStyle={{
   fontSize: 10,
   color: 'black',
}}

在 Avatar 组件周围有一个圆圈

Have a circle around Avatar component

react-native

react-native-elements