ReactNative自定义Avatar&Badge组件

功能

• 显示本地图片以及网络图片
• 使用名字的字母作为图像
• 默认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

代码

https://github.com/a396901990/react-native-badge-avatar