react-native - 在 Avatar 组件周围画一个圆圈

Question

在我的 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

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',
}}