ReactNative自定义Avatar&Badge组件

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/a396901990/article/details/79144169

功能

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

展开阅读全文

没有更多推荐了,返回首页