beUI Pro 移动端已上线

浏览
beUI Pro

React Native 配置

只需配置一次 Expo 应用，就能从私有 registry 安装任意移动端页面或区块。配置步骤与免费的 beUI Native 指南一致，并补充了 Pro 条目的安装路径。

Expo SDK, React Native58, 0.88 with React 19
Reanimated and Worklets4.7 and 0.13
Gesture Handler3.3
React Native SVG15.16
Uniwind with Tailwind CSS1.12 with 4.3

1. 安装依赖库

所有条目都使用 Reanimated 实现动画，使用 Uniwind 编写样式。通过 Expo 安装，确保版本与你的 SDK 匹配。少数条目需要额外的库，例如 Skia 或 Bottom Sheet，各条目页面会单独列出。

npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-svg
npm install uniwind tailwindcss

2. 配置 Uniwind 和主题

用 Uniwind 包裹 Metro 配置。Expo 的 Babel preset 已包含 Worklets 插件，因此 Expo 应用无需修改 Babel。

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

const config = getDefaultConfig(__dirname);

// Uniwind must be the outermost wrapper.
module.exports = withUniwindConfig(config, {
  cssEntryFile: "./global.css",
  dtsFile: "./uniwind-types.d.ts",
});

在项目根目录创建 global.css。主题导入指向首次安装时添加的 tokens；如果你的 CSS 位于子文件夹，还需为 components 添加 @source。

CSSglobal.css
@import "tailwindcss";
@import "uniwind";
@import "./components/beui-pro/beui/styles/theme.css";

3. 包裹应用

导入一次 global.css，并用 GestureHandlerRootView 包裹应用，滑动、拖拽和 sheet 都依赖它。

TSXapp/_layout.tsx
import "../global.css";

import { Stack } from "expo-router";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Stack />
    </GestureHandlerRootView>
  );
}

4. 连接 registry 并安装

Expo 应用需要完整的 components.json 才能使用 shadcn CLI。把下面的文件放到项目根目录，然后用账户中的 BEUI_PRO_TOKEN 安装。

JSONcomponents.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "global.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@beui-pro": {
      "url": "https://pro.beui.dev/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${BEUI_PRO_TOKEN}"
      }
    }
  }
}
export BEUI_PRO_TOKEN="beui_live_xxxxxxxxxxxx"
npx shadcn@latest add @beui-pro/native-tab-bar

条目会安装到 components/beui-pro，与其导入的共享 beUI 文件放在一起。更想要文件？可以在控制台下载单个或全部条目。

global.css
metro.config.js
components.json
components/
  beui-pro/
    premium/
      blocks/tab-bar/
    beui/
      hooks/
      styles/
        motion.ts
        theme.css
打开控制台获取 Mobile 许可证

5. 加载 Inter（可选）

Pro 条目使用 font-sans-medium 等类设置文字。要与演示效果一致，请在 global.css 中主题之后添加这些字体族，并在渲染前加载四种字重。跳过此步则使用系统字体。

npx expo install @expo-google-fonts/inter expo-font
CSSglobal.css
@theme {
  --font-sans: "Inter_400Regular";
  --font-sans-medium: "Inter_500Medium";
  --font-sans-semibold: "Inter_600SemiBold";
  --font-sans-bold: "Inter_700Bold";
}
TSXapp/_layout.tsx
import {
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
  useFonts,
} from "@expo-google-fonts/inter";

const [loaded] = useFonts({
  Inter_400Regular,
  Inter_500Medium,
  Inter_600SemiBold,
  Inter_700Bold,
});