简介
@beisen-phoenix/mobile-avatar 是一个基于 React Native 的头像组件。它提供了丰富的功能，比如支持网络图片、本地图片、自定义大小和样式等等。
安装
使用 npm 进行安装：
npm install @beisen-phoenix/mobile-avatar
或者使用 yarn 进行安装：
yarn add @beisen-phoenix/mobile-avatar
API
1. Avatar
该组件用于渲染头像，可以根据需求进行自定义大小和样式。
import Avatar from '@beisen-phoenix/mobile-avatar'
<Avatar size={40} src={'https://example.com/avatar.png'} />Props
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| size | number | 50 | 头像大小，单位为 dp |
| src | string | 无 | 头像图片地址 |
| style | ViewPropTypes.style | 无 | 头像样式 |
2. AvatarGroup
该组件用于渲染多个头像，可以自定义头像大小、间距、行数等等。
-- -------------------- ---- -------
------ ----------- ---- -------------------------------
------------
---------
-----------
------------
-------------
----------
- ---- ---------------------------------- --
- ---- ---------------------------------- --
- ---- ---------------------------------- --
- ---- ---------------------------------- --
- ---- ---------------------------------- --
- ---- ---------------------------------- --
--
--Props
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| size | number | 50 | 头像大小，单位为 dp |
| spacing | number | 10 | 头像之间的间距，单位为 dp |
| avatars | array | 无 | 头像数组，每个元素是一个对象，对象中的 src 属性为头像图片地址。 |
| maxCount | number | 5 | 最多显示的头像数量 |
| lineCount | number | 0 | 每行显示的头像数量，设置为 0 则不限制行数 |
| style | ViewPropTypes.style | 无 | 头像组样式 |
示例
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----------- ---- - ---- --------------
------ ------ ---- -------------------------------
------ ----------- ---- -------------------------------
------ ------- -------- ----- -
------ -
----- -------------------------
------- ---------- -------------------------------------- --
------------
---------
-----------
------------
-------------
----------
- ---- ---------------------------------- --
- ---- ---------------------------------- --
- ---- ---------------------------------- --
- ---- ---------------------------------- --
- ---- ---------------------------------- --
- ---- ---------------------------------- --
--
--
-------
-
-
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
--
--总结
@beisen-phoenix/mobile-avatar 是一个基于 React Native 的头像组件，它提供了丰富的功能，比如支持网络图片、本地图片、自定义大小和样式等等。它是一个非常方便实用的组件，在项目中可以大大减少开发时间和增加用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/135952