通过nativewind或tailwind添加expo google字体

Question

您好，我正在使用 Expo 开发应用程序，对于字体，我使用expo-google-fonts作为字体，并使用NativeWind进行样式，现在我想在 Native Wind 中配置 expo-google-fonts，

我试过这个，

import { StatusBar } from 'expo-status-bar';
import { View, Text } from 'react-native';
import AppLoading from 'expo-app-loading';
import { useFonts, JosefinSans_500Medium } from '@expo-google-fonts/josefin-sans';


export default function App() {
  let [fontsLoaded] = useFonts({
    JosefinSans_500Medium,
  });

  if (!fontsLoaded)
    return null;
  return (
    <View className="flex-1 items-center justify-center h-full w-full">
      <Text style={{ fontFamily: 'JosefinSans_500Medium', fontSize: 20}}>This work fine</Text>
      <Text className="font-josefin text-xl mt-2">This is not working</Text>
      <StatusBar style="auto" />
    </View>
  );
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}", 
    "./screens/*.{js,jsx,ts,tsx}",
    "./components/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'red-700': '#BF2F28',
        'red-600': '#D84942',
        'red-500': '#E0726D',
        'red-400': '#E99B97',
        'red-300': '#F2C3C1',
      },
      fontFamily: {
        josefin: ["JosefinSans_500Medium"]
      },
    },
  },
  plugins: [],
}

输出

Answer 1

尝试更换

fontFamily: {
    josefin: ["JosefinSans_500Medium"]
}

和

fontFamily: {
    sans: ["JosefinSans"]
}

并使用font-sans该类

 <Text className="font-sans text-xl mt-2">This is not working</Text>