# @beyondcorp/beyond-ui-native 中文文档

规范地址：https://npmcn.com/package/%40beyondcorp/beyond-ui-native/

版本：0\.1\.15
npm 元数据更新时间：2026-10-28T14:43:24.288Z
中文译文更新时间：2026-11-08T00:37:46.493Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40beyondcorp/beyond-ui-native
原文对照：https://npmcn.com/package/%40beyondcorp/beyond-ui-native/?lang=original
项目主页：https://github.com/soitechnologysolutions/beyond-ui-native#readme
源码仓库：https://github.com/soitechnologysolutions/beyond-ui-native

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

- 包体积（解压后）：1.1 MB，103 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：10 个
- peer 依赖：react \>=18\.2\.0，nativewind ^4\.0\.1，react-native \>=0\.74\.0
- 首次发布：2026-10-26T10:07:39.377Z
- 最新版本发布：2026-10-28T14:43:24.071Z
- 近 30 天下载量：2762（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：16（近 12 个月 16 个）

## 中文简介

可访问, 本地Wind- First React 本地组件库用于Beyond Softwares

## 安装

```sh
npm install @beyondcorp/beyond-ui-native
```

也可以使用：`pnpm add @beyondcorp/beyond-ui-native`、`yarn add @beyondcorp/beyond-ui-native`、`bun add @beyondcorp/beyond-ui-native`

## README

# @ beyondcorp/ beyond-ui-inative (英语)

> 由 Beyond Softwares 创建的原住民Wind-第一,可访问,TypeScript-First React 本地组件库.

作为移动对接器建立 [`@beyondcorp/beyond-ui`](https://github.com/beyondcorp/beyond-ui), Beyond UI Native 带来了统一的设计符号,可访问的原始人,复合组件,可再使用的屏幕模板,以及生产准备的移动模式来回回原生和博览会.

* * *

## 要点

-   ⚡ **本地窗口 v4- 第一位**:样式通用移动组件,使用直观的Tailwind CSS类.
-   ♿ **默认可访问**: 建于顶上 `@rn-primitives` (headless Radix原始作 React Introduct)和专为屏幕阅读器,焦点状态,以及ARIA角色提供A11y帮助.
-   🎨 **设计托肯对等**: 同步50-950个阴影平面(`primary`, (中文(简体) ), `secondary`, (中文(简体) ), `danger`编号 :`destructive`, (中文(简体) ), `success`, (中文(简体) ), `warning`, (中文(简体) ), `neutral`),语义上为暗/光模式符号,和边框光度相匹配Beyond UI网络生态系统.
-   🧩 **复合组件**: 用于对话框、底页、Accountions、Tabs、Setros、Cards和提醒的高度可调和的API.
-   📱 **屏幕模板**: 准备使用 制作用于认证的移动屏幕模板(Sign In, Sign Up, Forgot Phoson), Dashboard Overview,以及Profile/Settings.
-   🔔 **内建的土司和门户**:零配置上覆出入口和动画"吐司"标语 `useToast()`。 。 。 .
-   📦 **双模块格式**: 预先捆绑的无害环境管理(`.mjs`), commonJS(英语:`.js`),和完整类型脚本定义(`.d.ts`, (中文(简体) ), `.d.mts`) (中文(简体) ).

* * *

## 安装

```bash
# In your Expo or React Native app:
npm install @beyondcorp/beyond-ui-native
npx expo install nativewind tailwindcss react-native-reanimated
```

### 1\. 配置尾风预设

将本地的本地设置添加到您的 UI 中 `tailwind.config.js`数字 :

```javascript
// tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@beyondcorp/beyond-ui-native/dist/**/*.{js,mjs}",
  ],
  presets: [
    require("nativewind/preset"),
    require("@beyondcorp/beyond-ui-native/preset"),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

### 2\. 以 `BeyondUIProvider`

```tsx
import React from "react";
import { BeyondUIProvider } from "@beyondcorp/beyond-ui-native";
import { MainNavigator } from "./navigation";

export default function App() {
  return (
    <BeyondUIProvider defaultColorScheme="system">
      <MainNavigator />
    </BeyondUIProvider>
  );
}
```

* * *

## 组件目录

### 1\. 初级和布局

-   **`Box`**:多态容器,并配有转发回推器、土著风能类支持和无障碍道具.
-   **`Pressable`**: 与内置新闻反馈的交互式触摸目标(`opacity`, (中文(简体) ), `scale`, (中文(简体) ), `none`) (中文(简体) ).
-   **`Separator`**:可访问的横向和纵向布局分隔器.

### 2\. 字法

-   **`Heading`**: 语义头 (:`h1` 结束 `h6`,或数字级1-6.
-   **`Text`**: 文字支持变体(`body`, (中文(简体) ), `muted`, (中文(简体) ), `caption`, (中文(简体) ), `lead`, (中文(简体) ), `error`) (中文(简体) ).

### 3\. 动作和表格

-   **`Button`**备选案文:`primary`, (中文(简体) ), `secondary`, (中文(简体) ), `destructive`, (中文(简体) ), `danger`, (中文(简体) ), `outline`, (中文(简体) ), `ghost`, (中文(简体) ), `link`),尺寸(`sm`, (中文(简体) ), `md`, (中文(简体) ), `lg`, (中文(简体) ), `xl`装入自旋器.
-   **`Input`**: 文本输入方式 `leftIcon`编号 :`rightIcon`, (中文(简体) ), `leftElement`编号 :`rightElement`,错误消息和帮助文本.
-   **`Textarea`**: 有边框焦点状态和验证样式的多行文本输入.
-   **`Select`**: 具有触发器、可搜索选项表、检查标记选择和复合部件的移动优化拾取器(`SelectTrigger`, (中文(简体) ), `SelectContent`, (中文(简体) ), `SelectItem`, (中文(简体) ), `SelectValue`) (中文(简体) ).
-   **`Switch`**: 有暗模式主题支持的平滑切换.
-   **`Checkbox`**: 带有检查指示器的可访问复选框.
-   **`RadioGroup` 打开 `Radio`**: 单选无线电组.

### 4\. 重叠和反馈

-   **`Dialog`**: 复合模式对话框( X)`DialogTrigger`, (中文(简体) ), `DialogContent`, (中文(简体) ), `DialogHeader`, (中文(简体) ), `DialogTitle`, (中文(简体) ), `DialogDescription`, (中文(简体) ), `DialogFooter`, (中文(简体) ), `DialogClose`) (中文(简体) ).
-   **`BottomSheet`**: 有拖下拉出手势的滑行表模式,背景斜线,手柄条,头条和身体.
-   **`Accordion`**:可扩展手风琴部分(`AccordionItem`, (中文(简体) ), `AccordionTrigger`, (中文(简体) ), `AccordionContent`支持单项或多项.
-   **`Toast`**: 通过上下文驱动的动画通知 `useToast()` (单位:千美元)`toast.success()`, (中文(简体) ), `toast.error()`, (中文(简体) ), `toast.warning()`, (中文(简体) ), `toast.info()`) (中文(简体) ).
-   **`Alert`**: 状态警示横幅( T)`AlertTitle`, (中文(简体) ), `AlertDescription`) (中文(简体) ).
-   **`Spinner`**:动画活性指标.
-   **`Skeleton`**: 推取占位符进行同步数据加载.

### 5\. 数据显示

-   **`Card`**: 复合卡容器`CardHeader`, (中文(简体) ), `CardTitle`, (中文(简体) ), `CardDescription`, (中文(简体) ), `CardContent`, (中文(简体) ), `CardFooter`) (中文(简体) ).
-   **`Badge`**: 支持状态徽章 `primary`, (中文(简体) ), `secondary`, (中文(简体) ), `success`, (中文(简体) ), `warning`, (中文(简体) ), `danger`,以及 `outline`。 。 。 .
-   **`Avatar`**: 自动回落缩写的用户外形( U)`AvatarImage`, (中文(简体) ), `AvatarFallback`) (中文(简体) ).
-   **`StatsCard`**:带有趋势百分比指标、图标和说明的计量卡.
-   **`DataTable`**:可移动响应数据表和卡片列表,并附有搜索过滤器,可分类列和页码.
-   **`Tabs`**: 分页制表符控件 (`TabsList`, (中文(简体) ), `TabsTrigger`, (中文(简体) ), `TabsContent`) (中文(简体) ).

* * *

## 制作屏幕模板

除了UI Natural外, 还包括随时可用的、功能完备的移动屏幕模板 `@beyondcorp/beyond-ui-native`数字 :

```tsx
import {
  SignInTemplate,
  SignUpTemplate,
  ForgotPasswordTemplate,
  DashboardTemplate,
  SettingsTemplate,
} from "@beyondcorp/beyond-ui-native";
```

### 在屏幕上签名

```tsx
<SignInTemplate
  title="Welcome Back"
  subtitle="Sign in to your Beyond account"
  onSubmit={({ email, password, rememberMe }) => handleLogin(email, password)}
  onForgotPassword={() => navigation.navigate("ForgotPassword")}
  onSignUpPress={() => navigation.navigate("SignUp")}
  onGooglePress={handleGoogleLogin}
  onApplePress={handleAppleLogin}
/>
```

### 屏幕

```tsx
<DashboardTemplate
  userName="Mark"
  userRole="Principal Engineer"
  metrics={[
    { id: "1", title: "Revenue", value: "$48,500", trend: { direction: "up", value: "+14.2%", label: "this month" } },
    { id: "2", title: "Active Users", value: "12,400", trend: { direction: "up", value: "+6.8%", label: "growth" } },
  ]}
  quickActions={[
    { id: "1", label: "New Project", icon: "🚀", onPress: () => {} },
    { id: "2", label: "Export", icon: "📊", onPress: () => {} },
  ]}
  recentActivities={[
    { id: "1", title: "New Order #1084", subtitle: "2 items", timestamp: "5m ago", amount: "$149.00", status: { label: "Completed", variant: "success" } },
  ]}
/>
```

### 设置配置屏幕( P)

```tsx
<SettingsTemplate
  user={{ name: "Mark Otto", email: "mark@beyondsoftwares.com", plan: "Enterprise" }}
  pushNotifications={pushEnabled}
  onTogglePushNotifications={setPushEnabled}
  isDarkMode={colorScheme === "dark"}
  onToggleDarkMode={toggleColorScheme}
  onLogout={handleLogout}
  onDeleteAccount={handleDeleteAccount}
/>
```

* * *

## Monorepo 建筑

```
beyond-ui-native/
├── packages/
│   └── beyond-ui-native/      # The npm package (@beyondcorp/beyond-ui-native)
│       ├── src/
│       │   ├── components/    # 20+ production UI components
│       │   ├── primitives/    # Box, Pressable layout primitives
│       │   ├── templates/     # Auth, Dashboard, Settings templates
│       │   ├── providers/     # BeyondUIProvider & Portal host
│       │   ├── theme/         # Design tokens & Tailwind preset
│       │   └── utilities/     # cn (clsx + tailwind-merge) & a11y helpers
│       ├── tests/             # Automated test suite
│       └── tsup.config.ts     # ESM, CJS & DTS rollup
├── apps/
│   └── example/               # Expo SDK 52 interactive showcase app
└── .github/
    └── workflows/             # CI & Release automation pipelines
```

* * *

## 脚本

```bash
# Build the component library
npm run build

# Run TypeScript typechecks
npm run typecheck

# Run unit test suite
npm test

# Start the Expo example application
npm run example:start
```

* * *

## 许可证

MIT 超越软件

## 常见问题

### @beyondcorp/beyond-ui-native 是什么？

可访问, 本地Wind- First React 本地组件库用于Beyond Softwares

### 如何安装 @beyondcorp/beyond-ui-native？

在项目目录运行 npm install @beyondcorp/beyond-ui-native，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.2\.0）、nativewind（^4\.0\.1）、react-native（\>=0\.74\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @beyondcorp/beyond-ui-native 支持 TypeScript 吗？

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

### @beyondcorp/beyond-ui-native 支持 ESM 还是 CommonJS？

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

### @beyondcorp/beyond-ui-native 可以商用吗？

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

### @beyondcorp/beyond-ui-native 的下载量有多少？

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

### @beyondcorp/beyond-ui-native 还在维护吗？

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