React Native

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

尚未发布

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

安装

从源码

目前无法构建

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

与 Web 包一样（Git、Node 22.22 或更高版本、pnpm 12）：在仓库的克隆中构建这个包并打包，

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

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

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

发布之后

npm install @tanrei/react-native

使用

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"：

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

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

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 函数，把字体族和字重映射到你注册的字体名称。

GitHub 上的源码与 Issue