基本上,你需要跟随一些步骤...
要工作的主题,你需要更新 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/animations-react-native(必需)
- @tamagui/config(可选)
- @tamagui/babel-plugin(必需)
- babel-plugin-transform-inline-environment-variables(必需)
- 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';
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' {
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
我希望能够帮助你。