使用 Expo 和 TWRNC 的 React Native 中的自定义字体和 Tailwind 配置问题

Question

我目前正在开发一个使用

React Native, Expo, expo-google-fonts and TWRNC

进行样式设计的项目。尽管在应用程序最高级别的 _layout.tsx 文件中正确设置了自定义字体，但我遇到了字体未应用的问题。值得一提的是，所有其他样式都被应用，只有未应用的字体。另外，TWRNC 库似乎无法识别 tailwind.config.js 文件，因为当我尝试使用在主题对象的扩展键中添加的任何属性时，会出现未知或不正确的实用程序类错误

以下是我到目前为止所遵循的步骤：

1. 将自定义字体添加到

   assets/fonts

   目录。

2. 配置了

   _layout.tsx

   文件来加载这些字体。

3. 确保

   tailwind.config.js

   文件通过必要的配置正确设置。

尽管执行了这些步骤，但字体并未被应用，并且 TWRNC 似乎无法识别

tailwind.config.js

文件。

有人遇到过类似的问题或对如何解决这个问题有任何建议吗？任何帮助将不胜感激！

提前谢谢您！

//tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        "error-color": "#F50A00"
      },
      fontFamily: {
        "openSansRegular": ["OpenSans_400Regular"],
        "openSansMedium": ["OpenSans_500Medium"],
        "openSansSemiBold": ["OpenSans_600SemiBold"],
        "openSansBold": ["OpenSans_700Bold"],
        "openSansExtraBold": ["OpenSans_800ExtraBold"],
      }
    },
  },
  plugins: [],
};

//_layout.tsx global

import { Stack, SplashScreen, Slot } from "expo-router";
import {
  useFonts,
  OpenSans_400Regular,
  OpenSans_500Medium,
  OpenSans_600SemiBold,
  OpenSans_700Bold,
  OpenSans_800ExtraBold,
} from "@expo-google-fonts/open-sans";
import { useEffect } from "react";

SplashScreen.preventAutoHideAsync();

const RootLayout = () => {
  const [fontLoaded, fonError] = useFonts({
    OpenSans_400Regular,
    OpenSans_500Medium,
    OpenSans_600SemiBold,
    OpenSans_700Bold,
    OpenSans_800ExtraBold,
  });

  useEffect(() => {
    if (fontLoaded || fonError) {
      //* Delay de 2s para ocultar a Splash Screen e iniciar a navegação
      setTimeout(async () => {
        await SplashScreen.hideAsync();
      }, 2000);
    }
  }, [fontLoaded, fonError]);

  if (!fontLoaded && !fonError) {
    return null;
  }

  return (
    <>
      {/* <Slot /> */}
      <Stack screenOptions={{ headerShown: false }} />
        {/* <Stack.Screen name="login" />
        <Stack.Screen name="register" />
      </Stack> */}
    </>
  );
};

export default RootLayout

//Component that uses the font

import { StatusBar } from "expo-status-bar"
import { View, Text } from "react-native"
import tw from "twrnc"
import { Footer } from "../../components/Footer"
import { GlobalTextFont } from "../../components/TextGlobalFont"
import { Button } from "react-native"
import { Link } from "expo-router"


const LoginScreen = (): React.JSX.Element => {
  return (
    <>
      <View style={tw `bg-neutral-800 flex-1 items-center justify-center p-3`}>
        <Text style={tw `font-openSansBold text-xl text-neutral-100 text-error-color`}>Tela de login</Text>
        <Text style={tw `text-neutral-100 font-medium text-lg`}>Deus me deu inteligência e usando a fé eu digo que sou capaz porque Deus me faz capaz de renderizar o formulário</Text>
        <StatusBar style="light"/>
      <Link style={tw `text-lg text-neutral-100 mt-2`} href={"/register"}>Ir para cadastro</Link>
      </View>
      <Footer />
    </>
      
  )
}

export default LoginScreen

以下是我到目前为止所遵循的步骤：

1. 将自定义字体添加到

   assets/fonts

   目录。

2. 配置了

   _layout.tsx

   文件来加载这些字体。

3. 确保

   tailwind.config.js

   文件已通过必要的配置正确设置。

Answer 1

在应用这些字体之前，您需要在 css 中声明 @font-face。

此外，您只需要在 Tailwind 配置中指定字体系列，例如：

fontFamily: {
  "openSans": ["Open Sans"],
}

粗细和样式的声明属于 @font-face 声明，在你的 CSS 中，例如：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url(/src/fonts/OpenSans_700Bold.woff2) format('woff2');
}

请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face 了解更多详细信息。