Tamagui 允许您在 Web 和本机应用程序之间共享更多代码，而不会牺牲通常会受到影响的两件事：性能和代码质量。

它通过优化编译器来实现这一点，该编译器输出特定于平台的优化，将样式组件（即使具有复杂的逻辑或跨模块导入）转换为div网络上简单的原子css，或将其样式对象提升到本机的视图。

整个Tamagui 在编译时和运行时工作，并且可以逐步设置，初始使用就像导入它并使用基本视图和样式化函数一样简单。

安装 Tamagui

要安装 Tamagui 及其所有组件，请运行：

npm install tamagui @tamagui/config

接下来，创建一个名为的 Tamagui 配置文件tamagui.config.ts：

import { config } from '@tamagui/config/v2'

import { createTamagui } from 'tamagui'
const tamaguiConfig = createTamagui(config)
// this makes typescript properly type everything based on the config

type Conf = typeof tamaguiConfig

declare module 'tamagui' {

  interface TamaguiCustomConfig extends Conf {}

}
export default tamaguiConfig
// depending on if you chose tamagui, @tamagui/core, or @tamagui/web
// be sure the import and declare module lines both use that same name

注意：该v2配置在Web上导入css驱动程序，在本机上导入react-native。对于react-native，导入@tamagui/config/v2-native配置，对于reanimated，导入@tamagui/config/v2-reanimated配置。

用法

要在您的 Expo 或 Next.js 项目中使用 Tamagui，您所需要做的就是将您的应用程序包装在TamaguiProvider：

// this provides some helpful reset styles to ensure a more consistent look
// only import this from your web app, not native
import '@tamagui/core/reset.css'

import { TamaguiProvider } from 'tamagui'
import tamaguiConfig from './tamagui.config'

export default function App() {
  return (
    <TamaguiProvider config={tamaguiConfig}>
      {/* your app here */}
    </TamaguiProvider>
  )
}

完毕！现在尝试一些组件：

import { Button, Text } from 'tamagui'

function Example() {
  return (
    <Button>
      <Text>My button</Text>
    </Button>
  );
}

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4048