将 Tamagui 与现有 Expo React Native 应用程序集成

Question

阅读 Tamagui 文档一段时间后https://tamagui.dev/docs/guides/expo 我认为 Tamagui 仅当使用此命令与 Expo 项目一起生成时才在 Expo 中使用 npm create tamagui。如果 Tamagui 实际上可以与现有的 Expo React Native 应用程序集成，请给我提供文档或教程。提前致谢。

Answer 1

基本上，您需要遵循一些步骤......

要使用主题，您需要更新app.json，将“userInterfaceStyle”的值更改为“automatic”。

"userInterfaceStyle": "automatic",

一些依赖项对于 tamagui 的项目是必需的，因此，让我们安装所有依赖项：

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

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

• 塔玛吉（必填）
• @tamagui/shorthands（可选）
• @tamagui/主题（可选）
• @tamagui/font-inter （强制，您至少需要一种默认字体）
• @tamagui/animations-react-native（强制）
• @tamagui/config（可选）
• @tamagui/babel-plugin（强制）
• babel-plugin-transform-inline-environment-variables（强制）
• react-native-web（网络支持）
• React-dom（网络支持）

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

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;

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

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 并享受乐趣。

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;

我希望能帮助你。