# @anarock/pebble 中文文档

规范地址：https://npmcn.com/package/%40anarock/pebble/

版本：0\.46\.1
npm 元数据更新时间：2026-02-14T15:44:44.663Z
中文译文更新时间：2026-11-06T22:40:45.879Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40anarock/pebble
原文对照：https://npmcn.com/package/%40anarock/pebble/?lang=original

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

- 包体积（解压后）：3.5 MB，285 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：13 个
- peer 依赖：react ^16\.8\.4，react-dom ^16\.8\.4，@babel/runtime ^7\.3\.4
- 首次发布：2018-07-10T09:20:46.301Z
- 最新版本发布：2019-05-23T10:09:56.510Z
- 近 30 天下载量：2237（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：102（近 12 个月 0 个）

## 中文简介

> 以打字和情感书写的一套轻量级且可访问的React组件.

## 安装

```sh
npm install @anarock/pebble
```

也可以使用：`pnpm add @anarock/pebble`、`yarn add @anarock/pebble`、`bun add @anarock/pebble`

## README

# 石块

> 以打字和情感书写的一套轻量级且可访问的React组件.

## 安装

```
yarn add @anarock/pebble
```

## 开始

首先需要安装设计系统使用的字体和图标. 确保下面的代码从一开始就执行.

比较容易的方法是使用cdn:

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@anarock/pebble@[version]/dist/pebble.css"
/>
```

: boom: 警告: Pebble 添加 `box-sizing: border-box` 通过使用 [`inherit`](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)。 。 。 . 如果您有一些元素,其孩子需要默认的框缩放,您可以重置为框缩放 `content-box`

### 多元填充

Pebble打算在保持性能的同时留下很小的足迹. 然而,这样做的代价是只支持现代浏览器. 如果您需要支持遗留浏览器, 您需要添加多填充 .

```html
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.find,Array.prototype.findIndex,IntersectionObserver,Intl.~locale.en,Object.entries,default"></script>
```

### UMD 用户

```html
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.find,Array.prototype.findIndex,IntersectionObserver,Intl.~locale.en,Object.entries,default"></script>
<script src="https://unpkg.com/react@latest/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@anarock/pebble@latest/dist/pebble.umd.js"></script>
<script>
  // Components are available in window.pebble
  var Button = pebble.Button;
  var h = React.createElement;
  ReactDOM.render(
    h(
      Button,
      {
        onClick: function() {
          alert("You clicked the button");
        }
      },
      "Click Me!"
    ),
    document.getElementById("root")
  );
</script>
```

## 在本地反应中使用图标

在您的 `package.json`· ;

```json
"rnpm": {
    "assets": {
        "./node_modules/@anarock/pebble/native/icons"
    }
}
```

然后运行 `react-native link`。 。 。 . 然后可以导入图标组件来使用.

```jsx
import { Icon } from "@anarock/pebble/native";

// Usage
<Icon name="iconName" size={20} color="#000000" />;
```

## 鸣谢

我们用 [染色体qa](https://www.chromaticqa.com/) 用于视觉回归测试,这是真棒.

## 许可证

麻省理工学院

## 常见问题

### @anarock/pebble 是什么？

以打字和情感书写的一套轻量级且可访问的React组件\.

### 如何安装 @anarock/pebble？

在项目目录运行 npm install @anarock/pebble，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.4）、react-dom（^16\.8\.4）、@babel/runtime（^7\.3\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @anarock/pebble 支持 TypeScript 吗？

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

### @anarock/pebble 支持 ESM 还是 CommonJS？

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

### @anarock/pebble 可以商用吗？

@anarock/pebble 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @anarock/pebble 的下载量有多少？

根据 npm 官方下载统计，@anarock/pebble 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,237 次，日均约 75 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @anarock/pebble 还在维护吗？

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