@ beyondcorp/ beyond-ui-inative (英语)
由 Beyond Softwares 创建的原住民Wind-第一,可访问,TypeScript-First React 本地组件库.
作为移动对接器建立 @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) (中文(简体) ).
安装
# 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数字 :
// 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
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数字 :
import {
SignInTemplate,
SignUpTemplate,
ForgotPasswordTemplate,
DashboardTemplate,
SettingsTemplate,
} from "@beyondcorp/beyond-ui-native";
在屏幕上签名
<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}
/>
屏幕
<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)
<SettingsTemplate
user={{ name: "Mark Otto", email: "[email protected]", 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
脚本
# 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 超越软件