--- title: Avatar - 头像组件 nav: title: RN组件 path: /react-native group: title: 展示组件 path: /display order: 5 --- # Avatar 头像组件 ## 效果演示 ### 1. 默认头像 ```tsx | pure ```
默认头像 ios
### 2. 头像大小 ```tsx | pure ```
头像大小 ios
### 3. 头像弧度 ```tsx | pure ```
头像弧度 ios
### 4. 头像挂件 ```tsx | pure // 自定义挂件 位置在上边 } top={true} /> // 自定义挂件 位置在左上边 } top={true} left={true} /> // 自定义图片 ```
头像挂件 ios
### 5. 头像内容 ```tsx | pure // 自定义内容：使用文字 // 自定义内容：使用图片 // 自定义内容：使用图片 ```
头像内容 ios
### 6. 头像组 ```tsx | pure ```
头像组 ios
### 7. 头像组背景 ```tsx | pure ```
头像组背景 ios
## Avatar 组件 API | 属性 | 必填 | 说明 | 类型 | 默认值 | | --------------- | ------- | --------------------------------------------- | -------------------- | --------- | | url | `false` | 图片的路径 | `string` \| `number` | | | size | `false` | 头像大小 | `number` | `px(46)` | | borderRadius | `false` | 头像弧度 | `number` | `0` | | title | `false` | 标题（显示在头像中的文字，不能与 url 一起用） | `string` | | | circular | `false` | 头像是否为圆形 | `boolean` | `true` | | backgroundColor | `false` | 使用 title 时的背景 | `string` | `#E5F1FF` | | textStyle | `false` | title 文字的样式 | `TextStyle` | | | containerStyle | `false` | 容器的样式 | `ViewStyle` | | | activeOpacity | `false` | 点击时的透明度 | `number` | `0.6` | | onPress | `false` | 点击头像的回调事件 | `() => void` | | ## Accessory 组件 API | 属性 | 必填 | 说明 | 类型 | 默认值 | | --------- | ------- | -------------------- | -------------------- | -------- | | url | `false` | 图片的路径 | `string` \| `number` | | | size | `false` | 图标大小 | `number` | `px(14)` | | icon | `false` | 使用 icon 时的 props | `IconProps` | | | component | `false` | 使用自定义组件 | `ReactNode` | | | top | `false` | 挂件垂直方向位置 | `boolean` | `false` | | left | `false` | 挂件水平方向位置 | `boolean` | `false` | ## AvatarGroup 组件 API | 属性 | 必填 | 说明 | 类型 | 默认值 | | --------------- | ------- | ------------------------- | ----------- | --------- | | max | `false` | 最大显示数量 | `number` | `4` | | spacing | `false` | 头像的间距 | `number` | `px(23)` | | backgroundColor | `false` | 数量头像的背景 | `string` | `#E5F1FF` | | textStyle | `false` | 数量头像 title 文字的样式 | `TextStyle` | |