F0 本地反应 QQ

🚧 现况:世界投资方案 我们正在从头开始建造这个设计系统。 期待变化 打破变化 随着我们的脚步。 🏗️

反应原生实施F0设计系统.

新建结构兼容性

此软件包支持本地反应 仅新建架构 (布料/土波摩都斯)和 仅曝光 SDK 54+。见 docs/new-architecture.md 用于要求和排除出故障(特别是重新命名 + Uniwind主机应用程序设置).

支持的兼容性矩阵

QQ 快速设置

1️⃣ 安装依赖

# 1) Install package + JS peer dependencies
pnpm add @factorialco/f0-react-native \
  date-fns@^3.6.0 \
  tailwind-merge@^3.4.0 \
  tailwind-variants@^3.2.2 \
  tailwindcss@^4.1.18 \
  uniwind@^1.2.7 \
  twemoji-parser@^14.0.0

# 2) Install Expo-native dependencies pinned to your SDK
npx expo install \
  expo-image \
  react-native-reanimated \
  react-native-worklets \
  react-native-safe-area-context \
  react-native-svg

说明: 需要以下同伴依赖关系:

• uniwind 财务报告和审定财务报表 tailwindcss - 样式要求(必须在Metro和CSS文件中配置)
• tailwind-merge 财务报告和审定财务报表 tailwind-variants - 组件变异系统和类合并所需
• react-native-reanimated - 动画需要
• react-native-worklets - 重新命名后的4项要求
• react-native-safe-area-context - 安全处理所需
• react-native-svg - 图标组件需要
• date-fns - 日期公用事业所需经费
• twemoji-parser - 需要用于情感支持

2️⃣ 配置 Babel

babel.config.js数字 :

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ["babel-preset-expo"], // Expo only
  }
}

说明: 在管理的 Expo SDK 54+ 应用中使用标准 babel-preset-expo,重新激活/工作 Babel 插件已经包含,不应手工添加。 在自定义/空闲主机中,请遵循 docs/new-architecture.md 并明确添加所需的插件.

3QQ 配置地铁

metro.config.js数字 :

const { getDefaultConfig } = require("expo/metro-config")
const { withUniwindConfig } = require("uniwind/metro")

const config = getDefaultConfig(__dirname)

// Ensure CSS files trigger reloads
config.resolver.sourceExts = [...(config.resolver.sourceExts || []), "css"]

module.exports = withUniwindConfig(config, {
  cssEntryFile: "./global.css",
  dtsFile: "./uniwind-types.d.ts",
})

4️⃣ 创建全球CSS

global.css (基层):

@import "tailwindcss";
@import "uniwind";

/* Import F0 styles (theme tokens + base styles) */
@import "@factorialco/f0-react-native/styles";

/* Add your app's source paths for Tailwind CSS v4 */
@source "./app/**/*.{js,jsx,ts,tsx}";
@source "./src/**/*.{js,jsx,ts,tsx}";

/* Add F0 component sources so Tailwind can detect classes */
@source "./node_modules/@factorialco/f0-react-native/lib";

/* Also scan library source files */
@source "./node_modules/@factorialco/f0-react-native/src/**/*.{js,jsx,ts,tsx}";

在条目文件中导入( I)App.tsx 或者说 index.js:

import "./global.css"

说明: 添加 @source "./node_modules/@factorialco/f0-react-native/lib"; 因此,Tailwind可以检测到所有组件类.

5️⃣ 添加相通字体( Host App)

F0组件使用 间 字体家族。 主机应用程序必须嵌入字体文件 在Unindow上注册 iOS和Android都会正确解决它们.

步骤A:添加字体文件

放置间距 .ttf 文档. 文件名必须匹配 PostScript 每个字体文件中嵌入的名称 (您可以使用下列工具检查 PostScript 名称) fc-query 或者说 fontTools:

assets/fonts/Inter/
  Inter-Regular.ttf      # PostScript name: Inter-Regular   (weight 400)
  Inter-Medium.ttf       # PostScript name: Inter-Medium    (weight 500)
  Inter-SemiBold.ttf     # PostScript name: Inter-SemiBold  (weight 600)
  Inter-Bold.ttf         # PostScript name: Inter-Bold      (weight 700)

为什么文件名很重要 : iOS 通过 PostScript 名称解析字体, Android 通过 资产文件名(减去扩展名). 当它们匹配时,一个 CSS 值可以工作 两个平台都没有特定平台的覆盖.

步骤B:用 expo-font

添加数据 expo-font 您的配置插件 app.json数字 :

[
  "expo-font",
  {
    "fonts": [
      "./assets/fonts/Inter/Inter-Regular.ttf",
      "./assets/fonts/Inter/Inter-Medium.ttf",
      "./assets/fonts/Inter/Inter-SemiBold.ttf",
      "./assets/fonts/Inter/Inter-Bold.ttf"
    ]
  }
]

这在构建时嵌入了字体—— 没有运行时 useFonts 需要打电话.

步骤 C: 定义字体变量 global.css

添加一个 @theme 块 之后 f0 样式导入 :

@theme {
  --font-normal: "Inter-Regular";
  --font-medium: "Inter-Medium";
  --font-semibold: "Inter-SemiBold";
  --font-bold: "Inter-Bold";
}

值必须匹配文件名( 不包含) .ttf) (中文(简体) ). 单风图 font-normal, (中文(简体) ), font-medium, (中文(简体) ), font-semibold,以及 font-bold 水电费 这些变量.

需要进行重建: 字体更改在构建时被拾取,而不是通过 大都会热量重装. 运行 npx expo prebuild --clean && npx expo run:ios (或 run:android)在添加或重命名字体文件后.

6-% 类型脚本支持( 可选)

uniwind-types.d.ts (基层):

/// <reference types="uniwind/types" />

此文件在运行 Metro 时由 Uninwind 自动生成 。 你可以把它加进你的 .gitignore 如果需要的话.

QQ PR 预览( 使用 React Independent ALPHA 预览)

博览会预览出版与React Introduct ALPHA工作流程捆绑. QR 注释只在 React Introduct ALPHA 发布工作成功时才被发布.

• 触发源:反应原生ALPHA工作流程(build-and-publish-alpha(中文(简体) )
• 范围:当 React 本地软件包更改(或当手动触发时) build 该工作流程中的 PR 注释路径)
• 出版分支 : development
• 更新消息: 最新承诺消息( 通过 eas update --auto(中文(简体) )
• PR 输出: 有 Expo Go 链接和 QR 代码的可更新注释

需要的秘密

在 GitHub 中添加此寄存器密钥 :

• EXPO_TOKEN: 博览会账户设置的个人访问令牌

如何在 GitHub 中出现

在每次公关更新时,CI都会发布或更新一个单一的评论,其中包含:

• 更新元数据( 消息、 组ID、 时间戳)
• 博览会更新页面链接
• 直接 QR 链接
• 在 Expo Go 中快速扫描嵌入的 QR 图像

QQ 博览会去( 最新消息)

在每次手动更新后使用此部分,以便人们可以在Expo Go中安装最新的构建.

最新消息

• 分支/ 频道 : production
• 更新消息 : F0Text and AnimatedF0Text
• 发表于: Mar 4, 2026

深链接

• 在 博览会 GO 中打开

QQ QR 代码

Android 注释 : 如果用您设备相机扫描 QR 代码打开浏览器或显示 404, 打开 Expo Go 并使用其内置的 QR 扫描器.

使用量

基本组件使用量

import { F0Button, F0Icon, AppIcons } from "@factorialco/f0-react-native"

export default function App() {
  return (
    <>
      <F0Button label="Click me" variant="default" size="md" />
      <F0Icon icon={AppIcons.Calendar} size="md" />
    </>
  )
}

遗产 Button 财务报告和审定财务报表 Icon 仍可用于后向兼容,但已贬值.

使用 cn 工具

包输出 a cn 用于将 Tailwind 类与自动解决冲突合并的功能 :

import { cn } from "@factorialco/f0-react-native"
import { View } from "react-native"

function MyComponent({ className, isActive }) {
  return (
    <View
      className={cn(
        "rounded-lg bg-background p-4",
        "border-divider border",
        isActive && "bg-accent",
        className
      )}
    />
  )
}

这个 cn 工具栏 :

• QQ 自动将 Tailwind 类与解决冲突合并
• 用户 tailwind-merge 在引擎盖下
• QQ 支持自定义不透明类组
• ++ 适当处理有条件的类别

构成部分备选案文

所有组件使用 tailwind-variants 用于类型安全变体道具:

import { F0Button } from "@factorialco/f0-react-native"

// Type-safe variants
;<F0Button
  label="Primary Button"
  variant="default" // ✅ Autocomplete: "default" | "outline" | "critical" | "neutral" | "ghost" | "promote"
  size="md" // ✅ Autocomplete: "sm" | "md" | "lg"
/>

* 解决问题

未被Uniwind检测到的类

如果F0组件的样式没有被应用,请确保:

1. 导入样式并添加源路径 :  global.css 包括 F0 样式和 F0 源路径 :

   @import "@factorialco/f0-react-native/styles";
   @source "./node_modules/@factorialco/f0-react-native/lib";
   

2. Metro缓存 : 清除地铁捆绑缓存 :

   npx expo start --clear
   # or
   npm start -- --reset-cache
   

3. 依赖性 : 验证所有对等依赖已安装 :

   pnpm list tailwind-merge tailwind-variants tailwindcss uniwind
   

带有可变内容的脚本类型出错

如果您看到与变体有关的类型脚本错误, 请确保 tailwind-variants 已安装 :

pnpm add tailwind-variants@^3.2.2

构建错误

如果遇到构建错误,请确保:

• 安装所有对等依赖
• Metro配置包括 CSS 文件扩展名
• Babel 插件配置得当

发展

# Run tests
pnpm test

# Type check
pnpm tsc

# Lint
pnpm lint

# Build package
pnpm build

* 同伴依赖关系

此软件包需要在您的主机项目中安装以下对等依赖 :

许可证

麻省理工学院