---
title: "React Native"
description: "把 Tanrei 添加到 React Native 应用中。"
url: "https://tanrei.chnotchy.com/zh-cn/getting-started/react-native/"
last_updated: 2026-10-23T21:16:19.000Z
---

# React Native

> 把 Tanrei 添加到 React Native 应用中。

`@tanrei/react-native` 用 TypeScript 编写，不含原生模块，因此无需链接任何东西，也可以与 Expo 一起使用。它面向新架构（New Architecture），需要 React 19 和 React Native 0.78 或更高版本。

> [!WARNING]
> **尚未发布**
>
> `@tanrei/react-native` 尚未发布到 npm。一个平台在跟上当前的规格之后才会发布，在此之前 React Native 的 CI 处于暂停状态。下文“从源码”一节展示如何从 [chnotchy/tanrei](https://github.com/chnotchy/tanrei) 添加这个包；“发布之后”一节展示届时的安装方式。

## 安装

### 从源码

> [!WARNING]
> **目前无法构建**
>
> React Native 包尚未跟上当前的规格和令牌：它的源码是针对较早版本的生成令牌代码编写的，对照现在的令牌代码构建时会因类型错误而中止。在它跟上之前，它的 CI 处于暂停状态，[状态页面](https://tanrei.chnotchy.com/zh-cn/status/)把它的组件标记为“待跟进”。下面的步骤说明如何把它添加到应用中；等这个包跟上之后，这些步骤就能用了。

与 [Web 包](https://tanrei.chnotchy.com/zh-cn/getting-started/web/)一样（Git、Node 22.22 或更高版本、pnpm 12）：在仓库的克隆中构建这个包并打包，

```sh
git clone https://github.com/chnotchy/tanrei.git
cd tanrei
pnpm install
pnpm --filter @tanrei/react-native build
pnpm --filter @tanrei/react-native pack --pack-destination ../tanrei-packages
```

然后把打包出的文件安装到你的应用里：

```sh
npm install path/to/tanrei-packages/tanrei-react-native-*.tgz
```

### 发布之后

```sh
npm install @tanrei/react-native
```

## 使用

```tsx
import { Button, TanreiProvider } from '@tanrei/react-native';

export function App() {
  return (
    <TanreiProvider>
      <Button variant="filled" onPress={deploy}>
        部署
      </Button>
      <Button variant="outlined" size="small" disabled>
        取消
      </Button>
    </TanreiProvider>
  );
}
```

组件名为 `Button`，不带前缀，因为 JavaScript 模块本身已经起到了命名空间的作用。激活通过 `onPress` 报告，这是 React Native 对规格中 `click` 事件的惯用表达。

## 主题与对比度

`TanreiProvider` 默认跟随系统的配色方案。要固定它们，把 `theme` 设为 `"light"` 或 `"dark"`，把 `contrast` 设为 `"standard"`、`"medium"` 或 `"high"`：

```tsx
<TanreiProvider theme="dark" contrast="high">
  <App />
</TanreiProvider>
```

在组件树内部，`useTanrei()` 返回解析后的颜色和文本样式，供你自己的视图使用：

```tsx
const theme = useTanrei();
<Text style={[theme.text('body'), { color: theme.color('onSurfaceVariant') }]}>上次部署于 2 分钟前</Text>;
<Text style={theme.text('heading2', { emphasized: true })}>部署记录</Text>;
```

在这个平台上，文本样式和颜色角色的键使用驼峰命名：`heading1` 到 `heading6` 对应 `h1` 到 `h6`，`body` 是段落，`label` 是控件上的文字；令牌 `sys.color.on-surface-variant` 写作 `onSurfaceVariant`。`emphasized` 会在字重上加上该系列的强调级差；它不是一个单独的角色。

## 字体

用你平常的字体配置方式（例如 `expo-font`）加载 Inter（以及 Noto Sans JP、Roboto Mono）。由于 React Native 按字重选择字体文件，请给 `TanreiProvider` 传入一个 `resolveFont` 函数，把字体族和字重映射到你注册的字体名称。