# @codewithbeto/ui 中文文档

规范地址：https://npmcn.com/package/%40codewithbeto/ui/

版本：55\.0\.0
npm 元数据更新时间：2026-02-24T14:54:40.200Z
中文译文更新时间：2026-11-10T08:46:00.683Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：12.9 kB，12 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native \*，expo \*
- 首次发布：2026-02-08T03:31:20.934Z
- 最新版本发布：2026-02-24T14:54:40.046Z
- 近 30 天下载量：2052（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 3 个）

## 中文简介

为博览会应用程序所建的React Industrial UI组件库.

## 安装

```sh
npm install @codewithbeto/ui
```

也可以使用：`pnpm add @codewithbeto/ui`、`yarn add @codewithbeto/ui`、`bun add @codewithbeto/ui`

## README

# @ code with beto/ ui (英语)

为博览会应用程序所建的React Industrial UI组件库.

## 概览

这个软件包为React Native应用程序提供可再使用的UI组件. 构件以"回想原生"(React Introduct)为上部,并被设计为与"博览会"无缝地工作.

## 安装

```bash
pnpm add @codewithbeto/ui
```

或与 npm :

```bash
npm install @codewithbeto/ui
```

## 快速启动

```typescript
import { Text } from "@codewithbeto/ui";

export default function App() {
  return <Text type="title">Hello World</Text>;
}
```

## 构成部分

-   **[文本](https://npmcn.com/package/%40codewithbeto/ui/src/components/Text/README.md)** - 有多个大小变体的轻量级文本组件和完全回放原生文本兼容性

## 发展

### 本地开发设置

这个包是pnpm工作空间的一部分. 关于地方发展:

1.  清除寄存器并安装依赖性 :
    
    ```bash
    pnpm install
    ```
    
2.  使用工作空间链接 `apps/example` 测试您的更改 :
    
    ```typescript
    import { Text } from "@codewithbeto/ui";
    ```
    
3.  更改会在博览会自动重载.
    

### 大楼

在发布前, 您必须构建软件包来编译 TypeScript 到 JavaScript :

```bash
pnpm --filter @codewithbeto/ui build
```

此命令 :

-   编译类型脚本文件 `src/` 到 Java 脚本在 `dist/`
-   生成 TypeScript 声明文件(`.d.ts`用于类型支持
-   创建用于调试的源地图

**为什么建造?** 我们发布编译的JavaScript到npm,而不是TypeScript源文件. 这确保:

-   更快安装( 不需要编译)
-   较小的软件包大小
-   不同类型脚本版本之间更好的兼容性

### 类型检查

运行类型检查而不构建 :

```bash
pnpm --filter @codewithbeto/ui typecheck
```

## 出版

通过GitHub Actions自动发布. 无本地 `.npmrc` 或需要个人访问托肯.

### 如何运作

储存库包括: [发布工作流程](https://npmcn.com/package/.github/workflows/publish.yml) 即:

-   当一个 **GitHub 发布** 创建
-   发表于 `latest` 稳定释放,或 `beta` 预发
-   构建软件包并将其发布到 npm
-   用途 a `NPM_TOKEN` 用于认证的仓库密钥

### 版本

此套件跟随 **Expo SDK 版本方案**. 主要版本与它所建造和测试的世博会SDK版本相匹配. 譬如说, `@codewithbeto/ui@55.x.x` 设计为Expo SDK 55. 这样一看就很容易识别出您的软件包与您的SDK版本兼容.

在主要版本中,我们使用补丁来修复错误,使用小补丁来更新功能:

-   **补丁** (单位:千美元)`55.0.0` → `55.0.1`:错误修正,小改进
-   **次要** (单位:千美元)`55.0.0` → `55.1.0`: 新特性(后向兼容)

### 出版稳定版

1.  **弹出版本** 内 `package.json`。 。 。 .
    
2.  **提交版本出错** 推动到 `main`。 。 。 .
    
3.  **创建 GitHub 发布 :**
    
    -   转到 [页面](https://github.com/Code-with-Beto/cwb/releases/new)
    -   点击“ 草稿新版本 ”
    -   创建一个匹配版本的新标签( 例如 ), `v55.0.0`(中文(简体) )
    -   添加描述变化的放行注释
    -   点击“ 文件发布 ”
4.  工作流程将在 `latest` 标签.
    

### 发布 beta 版本

Beta的放出让你在稳定版本上测试新的更改而不影响用户.

1.  **弹出版本** 带有预放标识符,例如:. `55.0.0-beta.1`。 。 。 .
    
2.  **提交版本出错** 推到你的树枝上.
    
3.  **创建 GitHub 发布 :**
    
    -   转到 [页面](https://github.com/Code-with-Beto/cwb/releases/new)
    -   创建一个匹配版本的新标签( 例如 ), `v55.0.0-beta.1`(中文(简体) )
    -   检查 **"作为预释"** 复选框
    -   点击“ 文件发布 ”
4.  工作流程检测发布前旗并发布于 `beta` ditt-tag 代替 `latest`。 。 。 .
    

**安装β版本 :**

```bash
pnpm add @codewithbeto/ui@beta
```

运行的用户 `pnpm add @codewithbeto/ui` (无) `@beta`)将继续获得最新的稳定版本.

### 将 Beta 推广到稳定

一旦一个β经过测试并准备生产:

1.  **更新版本** 内 `package.json` 到稳定版本(删除预释标识符):
    
    -   `55.0.0-beta.3` → `55.0.0`
2.  **提交版本出错** 推动到 `main`。 。 。 .
    
3.  **创建常规 GitHub 发布** (做到这一点) **没有** 请检查access-date=中的日期值 (帮助) "Set as a pre-release":
    
    -   创建匹配稳定版本的新标签( 例如 ), `v55.0.0`(中文(简体) )
    -   点击“ 文件发布 ”
4.  工作流程发布软件包 `latest`。所有用户将在下次安装或更新时获得稳定版本.
    

### 示例:全发布寿命周期

以下是从开发到稳定发行的典型工作流程:

| 步骤 | 版本为 `package.json` | Git 标签 | 释放前? | 对立 |
| --- | --- | --- | --- | --- |
| 第一个β | `55.0.0-beta.1` | `v55.0.0-beta.1` | 对 | `beta` |
| 在β中修复一个错误 | `55.0.0-beta.2` | `v55.0.0-beta.2` | 对 | `beta` |
| 促进稳定 | `55.0.0` | `v55.0.0` | 没有 | `latest` |

您也可以手动启动工作流程 **行动** 选项卡,如果需要,则使用自定义 dist-tag.

### 软件包配置

软件包配置为 npm 发布 :

-   **书记官处:** `https://registry.npmjs.org`
-   **范围:** `@codewithbeto`
-   **访问 :** 公开
-   **包括的文件 :** 只有 `dist/` 文件夹(指定在 `package.json`(中文(简体) )

## 添加新组件

添加新组件时遵循此结构 :

1.  在 `src/components/`数字 :
    
    ```
    src/components/MyComponent/
    ├── MyComponent.tsx    # Component implementation
    ├── README.md          # Component documentation
    └── index.ts           # Exports
    ```
    
2.  用 TypeScript 创建组件 :
    
    ```typescript
    // src/components/MyComponent/MyComponent.tsx
    import { View } from "react-native";
    
    export interface MyComponentProps {
      // your props
    }
    
    export function MyComponent({ ...props }: MyComponentProps) {
      return <View>...</View>;
    }
    ```
    
3.  创建组件索引文件 :
    
    ```typescript
    // src/components/MyComponent/index.ts
    export { MyComponent, type MyComponentProps } from "./MyComponent";
    ```
    
4.  从主导出 `src/index.ts`数字 :
    
    ```typescript
    export { MyComponent, type MyComponentProps } from "./components/MyComponent";
    ```
    
5.  在组件中添加综合文档 `README.md` 包括:
    
    -   构成部分说明和特征
    -   有类型和说明的平面表
    -   用法实例
    -   类型脚本示例
6.  更新 [构成部分](https://npmcn.com/package/%40codewithbeto/ui/#readme-components) 区域,并链接到您新组件的 README.
    
7.  测试在 `apps/example` 发表前.
    

## 许可证

此软件包根据 [MIT 许可证](https://npmcn.com/package/LICENSE)。 。 。 .

## 常见问题

### @codewithbeto/ui 是什么？

为博览会应用程序所建的React Industrial UI组件库\.

### 如何安装 @codewithbeto/ui？

在项目目录运行 npm install @codewithbeto/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）、expo（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @codewithbeto/ui 支持 TypeScript 吗？

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

### @codewithbeto/ui 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @codewithbeto/ui 可以商用吗？

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

### @codewithbeto/ui 的下载量有多少？

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

### @codewithbeto/ui 还在维护吗？

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