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" }}
        />

属性

PropTypeRequiredDefaultComment
namestringoptional“”if no url will show name as Avatar
sourceobjectoptionalnullAvatar Image object same like default use
placeHolderobjectoptionalnullAvatar Image placeholder object same like default use
onPress()functionoptionalnullPress event callback
sizestringoptional“48”Size of Avatar, badge will be 1/4 of Avatar size
radiusintoptional1range of 0-1, 0 is rect, 1 is full circular
borderColorstringoptional“”avatar border color
borderWidthintoptional0avatar border width
badgestringoptional“”badge number
badgeIconstringoptional“”badge icon url
badgeTextColorstringoptionalwhitebadge text color
badgeBackgroundColorstringoptionalredbadge backgroud color
styleobjectoptionalnullcompontent style same like default use

代码

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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页