@asheui/ 本地语

AsheeUI on React Industrial: 相同的组件词汇,相同的道具合同和 与网络渲染器相同的设计语言,由平台自己建造 组件,所以屏幕表现平台的行为。 造型是原始风云, 和图层,两个渲染器共享 @asheeui/core。 。 。 .

特征

• 整套内容 ——58个组件中的每一个组件的相容性 对本地人的矩阵承诺得到落实:布局包、外地家庭、 反馈和状态家族、导航、覆盖、页面外壳和 营销乐队.
• 一个跨平台的词汇 ——一个组件由同名导入 并使用与其网页对应的相同道具,所以屏幕和页面可以共享 他们的构成.
• 排版工具包和反应能力 —— 说 Container, (中文(简体) ), Stack编号 :HStack编号 :VStack, (中文(简体) ), Grid, (中文(简体) ), Section, (中文(简体) ), Split 财务报告和审定财务报表 Page 及其标题、内容和页脚,加 useBreakpoint 与纯洁 resolveBreakpoint 财务报告和审定财务报表 resolveGridColumns。 。 。 .
• 配置驱动 ——每个组件登记并解决其缺省 通过同样的级联, 渲染器读取, 因此一个值可以在全球设定, 每 组件或每个实例.
• 平台的无障碍性 ——角色和状态在平台上被表述 拥有词汇,每个组件的测试都证实了这些词汇.
• 类型脚本第一 ——在每个出口符号上用JSDoc完全打入道具.

所需资源

• 反应18.2或更新,或19
• 通过 Expo 或 裸体 项目, 反应本地 0. 78 或 更新
• 原生Wind 4.2或更新,带有 尾风 CSS 3.x —— 本地Wind v4 不编译为 Tailwind v4, 这是网页渲染器使用的
• 22.12或较新的发展节点

安装

npm install @asheeui/native

软件包期望应用程序能提供平台的工具链,所以 设置可以适应应用程序自己的配置,而不是替换. 三个 文档和一个提供者 :

// babel.config.js — the interop runtime, which is what turns a className into a style
presets: [
  ["babel-preset-expo", { jsxImportSource: "nativewind" }],
  "nativewind/babel",
];

// metro.config.js — the stylesheet NativeWind compiles (import it from App.tsx too)
module.exports = withNativeWind(getDefaultConfig(__dirname), {
  input: "./global.css",
});

// tailwind.config.js — NativeWind's preset, the eight colour roles as the properties the
// provider paints, and the package's own classes; the globs are absolute, so any install
// layout works
const asheeui = require("@asheeui/native/tailwind-preset");

module.exports = {
  presets: [asheeui],
  content: ["./src/**/*.{ts,tsx}", ...asheeui.content],
};

然后将应用程序根包入 AsheeUIProvider - 网络渲染器使用的同名名称, 配置相同的:轴;组件;调色板(color和 defaultTheme,它遵循设备的颜色方案(AsheeNativeProvider 一样 其平台名称下的组件)。 在第一个屏幕前有三件事值得了解:

• 不安装 react-native-css-interop 你自己来. 土著Wind 4.2.7号船 它需要的,是你们自己决定的一针,而不是它,每个部件都变成无形的 没有扔.
• 调色板来自配置,而不是来自 tailwind.config.js。 。 。 . 预设 将每个角色声明为 rgb(var(--ashee-<role>) / <alpha-value>) 供应商用品 数值,所以 theme.extend.colors 输入角色在构建时修正并停止 如下 defaultTheme。提供者接受网络渲染器自己的 ExternalConfig 加号 仅限平台 defaultSize,所以一个配置对象——键入 ExternalConfig,或 AsheeConfig 从 asheeui ——描述两个渲染器.
• 一个开发大楼说,当管道没有连接. 供应商检查 运行时间、编译的样式表以及挂载的预设,并用 因为它找到了; verifyNativeWind() 返回与数据相同的诊断.

原生反应 文档,每个步骤 失败看起来像, 和命令检查他们.

公布的切入点是包根, @asheeui/native/section-kit 财务报告和审定财务报表 @asheeui/native/tailwind-preset;没有每个组件子路径,所以一个组件是 从根部以名称导入,捆绑则由捆绑者而不是由 导入路径.

快开始

import { AsheeNativeProvider, Button, Card, Text } from "@asheeui/native";

export function Screen() {
  return (
    <AsheeNativeProvider>
      <Card title="Invoices" description="Three are waiting for approval.">
        <Text>Nothing leaves the device until you send it.</Text>
        <Button onPress={() => undefined}>Approve all</Button>
      </Card>
    </AsheeNativeProvider>
  );
}

文档

文件是网站,使每个网页成为每一页 .md 变式和 作为一体 llms-full.txt数字 :

• 原生反应 ——设置,造型管线,平台决定什么
• 安装
• 配置
• 构成部分
• 无障碍
• 移徙

链接

• 联合国 https://www.asheeui.com (中文(简体) )
• 仓库 : https://github.com/AsheeSoftworks/AsheeUI (英语)
• 问题: https://github.com/AsheeSoftworks/AsheeUI/issubs (中文(简体) )

许可证

AsheeUI根据Apache许可证2.0获得许可 LICENSE 使用这个软件包的文件船, 版权和归属通知 NOTICE 旁边. 许可证发放 解释重新分配需要什么.