如何将Tamagui集成到现有Expo React Native应用？求相关文档教程

Tamagui完全支持集成到已有的Expo React Native项目中，以下是具体步骤：

1. 安装依赖 #

执行命令安装Tamagui核心包及Expo适配相关依赖：

npm install tamagui @tamagui/config @tamagui/expo-image expo-font react-native-reanimated

若使用Yarn：

yarn add tamagui @tamagui/config @tamagui/expo-image expo-font react-native-reanimated

2. 配置Babel #

在项目根目录的babel.config.js中添加Tamagui插件：

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

3. 创建Tamagui配置文件 #

在项目根目录新建tamagui.config.ts，添加基础配置：

import { createTamagui } from 'tamagui'
import { config } from '@tamagui/config/v3'

const tamaguiConfig = createTamagui(config)

export type Conf = typeof tamaguiConfig
declare module 'tamagui' {
  interface TamaguiCustomConfig extends Conf {}
}

export default tamaguiConfig

4. 配置应用入口 #

在App.tsx（或App.jsx）中引入Tamagui的Provider并加载所需字体：

import { useFonts } from 'expo-font'
import { TamaguiProvider } from 'tamagui'
import tamaguiConfig from './tamagui.config'
import { SafeAreaProvider } from 'react-native-safe-area-context'

export default function App() {
  const [fontsLoaded] = useFonts({
    Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
    InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
  })

  if (!fontsLoaded) {
    return null
  }

  return (
    <SafeAreaProvider>
      <TamaguiProvider config={tamaguiConfig}>
        {/* 你的原有应用内容 */}
      </TamaguiProvider>
    </SafeAreaProvider>
  )
}

5. 验证集成 #

在任意组件中即可使用Tamagui的UI组件，示例：

import { Button, Text } from 'tamagui'

export function DemoComponent() {
  return (
    <>
      <Text>已成功集成Tamagui</Text>
      <Button onPress={() => alert('Tamagui运行正常')}>测试按钮</Button>
    </>
  )
}

内容的提问来源于stack exchange，提问作者Duc Thang