功能
- 显示本地图片以及网络图片
- 使用名字的字母作为图像
- 默认placeholder
- 显示border
- 设置圆角大小
- 设置未读消息
- 设置右上角Icon角标
- 自动适配badge大小
- 点击事件
- 自定义style
代码基于两个开源库并进行了简化和封装
- https://github.com/Samoy/react-native-badge-view
- https://github.com/avishayil/react-native-user-avatar
效果图
Screen Shot.png
使用
npm install --save react-native-badge-avatar
或者
yarn add react-native-badge-avatar
导入后使用方式如下：
<Avatar
size="68"
name="Dean Guo"
style={{margin:6}}
source={{url : "https://avatars3.githubusercontent.com/u/8385255?s=460&v=4" }}
placeHolder={require('./images/badge_icon.png')}
onPress={ () =>
alert('click')
}
/>
<Avatar
size="68"
name="Dean Guo"
style={{margin:6}}
source={require('./images/badge_icon.png')}
onPress={ () =>
alert('click')
}
/>
<Avatar
size="80"
name="Dean Guo"
source={{url : "https://avatars3.githubusercontent.com/u/8385255?s=460&v=4" }}
badge="6"
/>
<Avatar
size="100"
name="Dean Guo"
radius={0.2}
source={{url : "https://avatars3.githubusercontent.com/u/8385255?s=460&v=4" }}
badge="6"
badgeIcon={require('./images/badge_icon.png')}
/>
<Avatar
size="120"
borderColor="black"
borderWidth={3}
name="Dean Guo"
source={{url : "https://avatars3.githubusercontent.com/u/8385255?s=460&v=4" }}
/>
属性
| Prop | Type | Required | Default | Comment |
|---|---|---|---|---|
| name | string | optional | "" | if no url will show name as Avatar |
| source | object | optional | null | Avatar Image object same like default use |
| placeHolder | object | optional | null | Avatar Image placeholder object same like default use |
| onPress() | function | optional | null | Press event callback |
| size | string | optional | "48" | Size of Avatar, badge will be 1/4 of Avatar size |
| radius | int | optional | 1 | range of 0-1, 0 is rect, 1 is full circular |
| borderColor | string | optional | "" | avatar border color |
| borderWidth | int | optional | 0 | avatar border width |
| badge | string | optional | "" | badge number |
| badgeIcon | string | optional | "" | badge icon url |
| badgeTextColor | string | optional | white | badge text color |
| badgeBackgroundColor | string | optional | red | badge backgroud color |
| style | object | optional | null | compontent style same like default use |
