# @brightlayer-ui/react-native-progress-icons 中文文档

规范地址：https://npmcn.com/package/%40brightlayer-ui/react-native-progress-icons/

版本：2\.3\.0
npm 元数据更新时间：2026-10-07T09:38:22.270Z
中文译文更新时间：2026-11-08T15:24:46.819Z
软件包许可：BSD-3-Clause

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40brightlayer-ui/react-native-progress-icons
原文对照：https://npmcn.com/package/%40brightlayer-ui/react-native-progress-icons/?lang=original
项目主页：https://github.com/etn-ccis/blui-react-native/blob/dev/packages/blui-react-native-progress-icons/README.md
源码仓库：https://github.com/etn-ccis/blui-react-native

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：38 kB，24 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^19\.1\.0，react-native ~0\.84\.0，react-native-svg ^15\.15\.0
- 首次发布：2021-10-21T18:02:27.598Z
- 最新版本发布：2026-10-07T09:38:22.029Z
- 近 30 天下载量：13424（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 9 个）

## 中文简介

反演 Brightlayer UI 应用程序的本地进度图标

## 安装

```sh
npm install @brightlayer-ui/react-native-progress-icons
```

也可以使用：`pnpm add @brightlayer-ui/react-native-progress-icons`、`yarn add @brightlayer-ui/react-native-progress-icons`、`bun add @brightlayer-ui/react-native-progress-icons`

## README

# 亮层 UI 反应原生进度图标

[![](https://img.shields.io/npm/v/@brightlayer-ui/react-native-progress-icons.svg?label=@brightlayer-ui/react-native-progress-icons&style=flat)](https://www.npmjs.com/package/@brightlayer-ui/react-native-progress-icons)

![Progress icons](https://raw.githubusercontent.com/etn-ccis/blui-progress-icons/master/assets/progress-icons.png)

这是一个具有动态填充能力的图标库,可用于显示进度(类似于传统的进度自旋器或栏). 这些可以用来显示健康,电池寿命等.

目前,我们备有下列图标:

-   电池
-   心脏
-   馅饼
-   信号
-   上调
-   电池全长

## 安装

要安装来自国家防范机制的 Brightlayer UI 进度图标作为您的项目的依赖, 您可以在您的工程根中运行以下命令 :

```sh
yarn add @brightlayer-ui/react-native-progress-icons
```

### 同伴依赖关系

为了使用这个图书馆,你还必须有 `react-native-svg` 安装在您的工程中。 你可以通过运行来添加:

```sh
yarn add react-native-svg
```

### 装入 Expo

如果您正在使用 Expo, 则 Expo 客户端应用程序中已经包含必要的本地代码 `react-native-svg`。 。 。 .

安装 JavaScript 依赖性 :

```sh
npx expo install react-native-svg
```

见 [展览文件](https://docs.expo.dev/versions/latest/sdk/svg/) 更多信息.

## 使用应用程序中的进度图标

进度图标组件可以导入并使用,就像您会使用任何其他组件一样.

```tsx
import {Battery, Heart, Pie, Signal, BatteryLarge} from '@brightlayer-ui/react-native-progress-icons';

<Battery percent={100} size={36} color={'green'} charging={true} outlined={true}/>
<Heart percent={50} size={18} color={'pink'} outlined={true}/>
<Pie percent={50} size={48} color={'blue'} ring={4} outlined={true}/>
<Signal percent={75} size={48} color={'teal'} outlined={true}/>
<BatteryLarge percent={56} size={28} color={'yellow'} outlined={true}/>
```

## API 密码

### 共享属性

这些道具可在此包中的所有进度图标上提供.

| Propa 名称 | 说明 | 类型 | 需求 | 默认 |
| --- | --- | --- | --- | --- |
| 背景颜色 | 未填充区域的背景颜色 | `string` | 没有 |  |
| 颜色 | 图标填充所用的颜色 | `string` | 对 |  |
| 标签颜色 | 标签文本颜色 | `string` | 没有 |  |
| 标签选项 | 在哪里显示文本标签 | `'top'` | `'bottom'` | `'center'` | `'right'` | `'left'` | 没有 | `center` |
| 标签大小 | Px 标签大小 | `number` | 没有 | `size/4` |
| 概述 | 是否使用概述的样式 | `boolean` | 没有 | 虚假 |
| 百分比 | 填充图标的金额 (0- 100) | `number` | 没有 | 100个 |
| 显示中间标签 | 显示叠加百分比的选项 | `boolean` | 没有 | 虚假 |
| 大小 | 图标的大小 (px) | `number` | 没有 | 24个 |

提供的任何其他道具将提供给根元件([`Svg`](https://github.com/react-native-svg/react-native-svg)) (中文(简体) ).

### 电池属性

电池支持上述所有共享属性和以下附加属性:

| Propa 名称 | 说明 | 类型 | 需求 | 默认 |
| --- | --- | --- | --- | --- |
| 充电 | 是否显示充电指标 | `boolean` | 没有 | 虚假 |

### 派属性

该派支持上面所有共享属性和以下附加属性:

| Propa 名称 | 说明 | 类型 | 需求 | 默认 |
| --- | --- | --- | --- | --- |
| 环 | 外环厚度(1=薄环,10=全圆) | `number` | 没有 | 10个 |

## 常见问题

### @brightlayer-ui/react-native-progress-icons 是什么？

反演 Brightlayer UI 应用程序的本地进度图标

### 如何安装 @brightlayer-ui/react-native-progress-icons？

在项目目录运行 npm install @brightlayer-ui/react-native-progress-icons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.1\.0）、react-native（~0\.84\.0）、react-native-svg（^15\.15\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @brightlayer-ui/react-native-progress-icons 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @brightlayer-ui/react-native-progress-icons 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @brightlayer-ui/react-native-progress-icons 可以商用吗？

@brightlayer-ui/react-native-progress-icons 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### @brightlayer-ui/react-native-progress-icons 的下载量有多少？

根据 npm 官方下载统计，@brightlayer-ui/react-native-progress-icons 在 2026/10/09 – 2026/11/07 这 30 天内被下载 13,424 次，日均约 447 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @brightlayer-ui/react-native-progress-icons 还在维护吗？

最新版本 2\.3\.0 发布于 2026/10/07（1 个月前）；至今共发布 16 个版本，其中过去 12 个月发布了 9 个；首次发布于 2021/10/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。