基本上，你需要遵循一些步骤…
要工作主题，需要更新app.json，将userInterfaceStyle的值改为automatic。

"userInterfaceStyle": "automatic",

一些依赖项对于tamagui的项目是强制性的，所以，让我们安装所有这些依赖项：

npx expo install expo-font expo-linear-gradient react-native-reanimated

现在，我们将安装一系列软件包：

• tamagui（强制性）
• @tamagui/shorthands（可选）
• @tamagui/themes（可选）
• @tamagui/font-inter（强制性的，你需要至少一种默认字体）
• @tamagui/动画-React-本机（强制）
• @tamagui/config（可选）
• @tamagui/babel-plugin（强制性）
• babel-plugin-transform-inline-environment-variables（mandatory）
• react-native-web（web支持）
• react-dom（web支持）

有一些可选的软件包，但我强烈建议你也安装。

yarn add tamagui @tamagui/shorthands @tamagui/themes @tamagui/font-inter @tamagui/animations-react-native @tamagui/config @tamagui/babel-plugin babel-plugin-transform-inline-environment-variables react-native-web react-dom

之后，我们需要像这样更新babel.config.js

process.env.TAMAGUI_TARGET = 'native'; // Don't forget to specify your TAMAGUI_TARGET here

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['@tamagui/babel-plugin', {
        components: ['tamagui'],
        config: './tamagui.config.ts',
        logTimings: true
      }],
      ['transform-inline-environment-variables', {
        include: 'TAMAGUI_TARGET',
      }],
      'react-native-reanimated/plugin'
     ]
  };
};

现在我们需要在项目的根目录下创建配置文件

touch tamagui.config.ts

并将以下代码粘贴到tamagui.config.ts中

import { createInterFont } from '@tamagui/font-inter';
import { createMedia } from '@tamagui/react-native-media-driver';
import { shorthands } from '@tamagui/shorthands';
import { themes, tokens } from '@tamagui/theme-base';
import { createTamagui } from 'tamagui';
import { createAnimations } from '@tamagui/animations-react-native';

const animations = createAnimations({
  bouncy: {
    type: 'spring',
    damping: 10,
    mass: 0.9,
    stiffness: 100,
  },
  lazy: {
    type: 'spring',
    damping: 20,
    stiffness: 60,
  },
  quick: {
    type: 'spring',
    damping: 20,
    mass: 1.2,
    stiffness: 250,
  }
});
const headingFont = createInterFont();
const bodyFont = createInterFont();
const config = createTamagui({
  animations,
  defaultTheme: 'dark',
  shouldAddPrefersColorThemes: false,
  themeClassNameOnRoot: false,
  shorthands,
  fonts: {
    heading: headingFont,
    body: bodyFont,
  },
  themes,
  tokens,
  media: createMedia({
    xs: { maxWidth: 660 },
    sm: { maxWidth: 800 },
    md: { maxWidth: 1020 },
    lg: { maxWidth: 1280 },
    xl: { maxWidth: 1420 },
    xxl: { maxWidth: 1600 },
    gtXs: { minWidth: 660 + 1 },
    gtSm: { minWidth: 800 + 1 },
    gtMd: { minWidth: 1020 + 1 },
    gtLg: { minWidth: 1280 + 1 },
    short: { maxHeight: 820 },
    tall: { minHeight: 820 },
    hoverNone: { hover: 'none' },
    pointerCoarse: { pointer: 'coarse' },
  })
});

export type AppConfig = typeof config;

declare module 'tamagui' {
  // overrides TamaguiCustomConfig so your custom types
  // work everywhere you import `tamagui`
  interface TamaguiCustomConfig extends AppConfig {}
}

export default config;

在App.tsx中添加Tamagui提供程序和主题支持

import { StatusBar } from "expo-status-bar";
import { useColorScheme } from "react-native";
import { Paragraph, Spacer, TamaguiProvider, Theme, YStack } from "tamagui";
import { useFonts } from "expo-font";
import config from "./tamagui.config";
export default function App() {
  const colorScheme = useColorScheme();
  const [loaded] = useFonts({
    Inter: require("@tamagui/font-inter/otf/Inter-Medium.otf"),
    InterBold: require("@tamagui/font-inter/otf/Inter-Bold.otf"),
  });
  if (!loaded) {
    return null;
  }
  return (
    <TamaguiProvider config={config}>
      <Theme name={colorScheme === "dark" ? "dark" : "light"}>
        <YStack
          f={1}
          jc='center'
          ai="center"
          backgroundColor={"$backgroundSoft"}>
          <Paragraph color='$color' jc="center">
            {colorScheme}
          </Paragraph>
          <StatusBar style="auto" />
        </YStack>
      </Theme>
    </TamaguiProvider>
  );
}

所以，毕竟，我们可以只运行expo与缓存清除标志和乐趣。

npx expo start --clear

我希望能帮助你。