# @factorialco/f0-react-native 中文文档

规范地址：https://npmcn.com/package/%40factorialco/f0-react-native/

版本：1\.1\.0
npm 元数据更新时间：2026-11-12T10:51:59.280Z
中文译文更新时间：2026-11-14T08:29:28.496Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：3.3 MB，2643 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \*，uniwind ^1\.9\.0，date-fns ^3\.6\.0，expo-blur \*，expo-image \*，tailwindcss ^4\.1\.18，react-native \*，expo-clipboard \*，tailwind-merge ^3\.4\.0，twemoji-parser ^14\.0\.0，react-native-svg ^15\.12\.1，tailwind-variants ^3\.2\.2，react-native-worklets \>=0\.5\.1 \<1\.0\.0，react-native-reanimated \>=4\.1\.1 \<5\.0\.0，react-native-safe-area-context ^5\.6\.0
- 首次发布：2025-09-11T13:00:03.557Z
- 最新版本发布：2026-11-12T10:51:59.041Z
- 近 30 天下载量：6770（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：55（近 12 个月 52 个）

## 中文简介

F0 设计系统的原生组件

## 安装

```sh
npm install @factorialco/f0-react-native
```

也可以使用：`pnpm add @factorialco/f0-react-native`、`yarn add @factorialco/f0-react-native`、`bun add @factorialco/f0-react-native`

## README

# F0 本地反应 QQ

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

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

## 新建结构兼容性

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

### 支持的兼容性矩阵

| 主机堆栈 | 支助 |
| --- | --- |
| 曝光 SDK 54+ | 获支持 |
| 博览SDK 53及以下 | QQ 不支持 |
| 启用了新架构( N)`expo.newArchEnabled`(中文(简体) ) | 所需时间 |
| 旧建筑 | QQ 不支持 |

## QQ 快速设置

### 1️⃣ 安装依赖

```bash
# 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`数字 :**

```javascript
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`](https://npmcn.com/package/%40factorialco/f0-react-native/docs/new-architecture.md) 并明确添加所需的插件.

### 3QQ 配置地铁

**`metro.config.js`数字 :**

```javascript
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` (基层):**

```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`:**

```typescript
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`**数字 :

```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 样式导入 :

```css
@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` (基层):**

```typescript
/// <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 代码

![Expo Go QR Code](https://npmcn.com/package/%40factorialco/f0-react-native/assets/images/expo-go-qr.svg)

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

## 使用量

### 基本组件使用量

```tsx
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 类与自动解决冲突合并的功能 :

```tsx
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` 用于类型安全变体道具:

```tsx
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 源路径 :
    
    ```css
    @import "@factorialco/f0-react-native/styles";
    @source "./node_modules/@factorialco/f0-react-native/lib";
    ```
    
2.  **Metro缓存 :** 清除地铁捆绑缓存 :
    
    ```bash
    npx expo start --clear
    # or
    npm start -- --reset-cache
    ```
    
3.  **依赖性 :** 验证所有对等依赖已安装 :
    
    ```bash
    pnpm list tailwind-merge tailwind-variants tailwindcss uniwind
    ```
    

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

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

```bash
pnpm add tailwind-variants@^3.2.2
```

### 构建错误

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

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

## 发展

```bash
# Run tests
pnpm test

# Type check
pnpm tsc

# Lint
pnpm lint

# Build package
pnpm build
```

## \* 同伴依赖关系

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

| 软件包 | 版本 | 需求 | 目的 |
| --- | --- | --- | --- |
| `react` | `*` | 对 | 反应库 |
| `react-native` | `*` | 对 | 反应原生框架 |
| `tailwindcss` | `^4.1.18` | 对 | CSS框架 |
| `uniwind` | `^1.2.7` | 对 | 原生反应的尾风 CSS |
| `tailwind-merge` | `^3.4.0` | 对 | 类合并工具 |
| `tailwind-variants` | `^3.2.2` | 对 | 备选案文制度 |
| `react-native-reanimated` | `>=4.1.1 <5.0.0` | 对 | 动画 |
| `react-native-worklets` | `>=0.5.1 <1.0.0` | 对 | 重新激活的4个工作室运行时间 |
| `react-native-safe-area-context` | `^5.6.0` | 对 | 安全区处理 |
| `react-native-svg` | `^15.12.1` | 对 | 图标的 SVG 支持 |
| `expo-image` | `~3.0.11` | 对 | 图像渲染 |
| `expo-blur` | `~15.0.8` | 对 | 模糊效果 |
| `date-fns` | `^3.6.0` | 对 | 日期公用事业 |
| `twemoji-parser` | `^14.0.0` | 对 | 爱莫吉支持 |

## 许可证

麻省理工学院

## 常见问题

### @factorialco/f0-react-native 是什么？

F0 设计系统的原生组件

### 如何安装 @factorialco/f0-react-native？

在项目目录运行 npm install @factorialco/f0-react-native，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、uniwind（^1\.9\.0）、date-fns（^3\.6\.0）、expo-blur（\*）、expo-image（\*）、tailwindcss（^4\.1\.18）、react-native（\*）、expo-clipboard（\*）、tailwind-merge（^3\.4\.0）、twemoji-parser（^14\.0\.0）、react-native-svg（^15\.12\.1）、tailwind-variants（^3\.2\.2）、react-native-worklets（\>=0\.5\.1 \<1\.0\.0）、react-native-reanimated（\>=4\.1\.1 \<5\.0\.0）、react-native-safe-area-context（^5\.6\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @factorialco/f0-react-native 支持 TypeScript 吗？

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

### @factorialco/f0-react-native 支持 ESM 还是 CommonJS？

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

### @factorialco/f0-react-native 可以商用吗？

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

### @factorialco/f0-react-native 的下载量有多少？

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

### @factorialco/f0-react-native 还在维护吗？

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