如何将expo-google-fonts添加到React Native全局样式表

我正在使用@expo-google-fonts/poppins字体包，官方示例仅展示了在单个Text组件所在文件中加载字体并单独设置fontFamily的方式，但我希望将字体配置到全局样式表，避免在每个页面的每个Text组件上重复设置样式。

我的全局样式表代码如下：

import { StyleSheet } from "react-native";

export const globalStyles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fdfdfd",
    alignItems: "center",
    justifyContent: "center",
  },
  primaryButtonText: {
    color: "#fdfdfd",
    fontSize: 18,
    fontFamily: "Poppins_100Thin",
  },
  secondaryButtonText: {
    color: "#228ee7",
    fontSize: 18,
    fontFamily: "Poppins_100Thin",
  },
});

我曾尝试提取官方示例的字体定义和导入逻辑到fonts.js文件，但导入到全局样式表后字体并未成功加载，代码如下：

import {
  useFonts,
  Poppins_100Thin,
  Poppins_100Thin_Italic,
  Poppins_200ExtraLight,
  Poppins_200ExtraLight_Italic,
  Poppins_300Light,
  Poppins_300Light_Italic,
  Poppins_400Regular,
  Poppins_400Regular_Italic,
  Poppins_500Medium,
  Poppins_500Medium_Italic,
  Poppins_600SemiBold,
  Poppins_600SemiBold_Italic,
  Poppins_700Bold,
  Poppins_700Bold_Italic,
  Poppins_800ExtraBold,
  Poppins_800ExtraBold_Italic,
  Poppins_900Black,
  Poppins_900Black_Italic,
} from "@expo-google-fonts/poppins";

export default function PoppinsFont() {
  let [fontsLoaded] = useFonts({
    Poppins_100Thin,
    Poppins_100Thin_Italic,
    Poppins_200ExtraLight,
    Poppins_200ExtraLight_Italic,
    Poppins_300Light,
    Poppins_300Light_Italic,
    Poppins_400Regular,
    Poppins_400Regular_Italic,
    Poppins_500Medium,
    Poppins_500Medium_Italic,
    Poppins_600SemiBold,
    Poppins_600SemiBold_Italic,
    Poppins_700Bold,
    Poppins_700Bold_Italic,
    Poppins_800ExtraBold,
    Poppins_800ExtraBold_Italic,
    Poppins_900Black,
    Poppins_900Black_Italic,
  });

  return fontsLoaded;
}

解决方案 #

之前的方法无效是因为useFonts是React Hook，只能在React组件中执行，而全局样式表是静态的StyleSheet对象，无法运行Hook逻辑。正确的做法是在应用根组件中加载字体，确保字体加载完成后再渲染应用，这样全局样式里的fontFamily就能匹配到已加载的字体。

方法1：直接在根组件加载字体

修改你的根组件（比如App.js），在其中完成字体加载：

import { StatusBar } from 'expo-status-bar';
import { View, Text } from 'react-native';
import { useFonts, 
  Poppins_100Thin,
  Poppins_100Thin_Italic,
  Poppins_200ExtraLight,
  Poppins_200ExtraLight_Italic,
  Poppins_300Light,
  Poppins_300Light_Italic,
  Poppins_400Regular,
  Poppins_400Regular_Italic,
  Poppins_500Medium,
  Poppins_500Medium_Italic,
  Poppins_600SemiBold,
  Poppins_600SemiBold_Italic,
  Poppins_700Bold,
  Poppins_700Bold_Italic,
  Poppins_800ExtraBold,
  Poppins_800ExtraBold_Italic,
  Poppins_900Black,
  Poppins_900Black_Italic,
} from '@expo-google-fonts/poppins';
import { globalStyles } from './path/to/globalStyles';

export default function App() {
  let [fontsLoaded] = useFonts({
    Poppins_100Thin,
    Poppins_100Thin_Italic,
    Poppins_200ExtraLight,
    Poppins_200ExtraLight_Italic,
    Poppins_300Light,
    Poppins_300Light_Italic,
    Poppins_400Regular,
    Poppins_400Regular_Italic,
    Poppins_500Medium,
    Poppins_500Medium_Italic,
    Poppins_600SemiBold,
    Poppins_600SemiBold_Italic,
    Poppins_700Bold,
    Poppins_700Bold_Italic,
    Poppins_800ExtraBold,
    Poppins_800ExtraBold_Italic,
    Poppins_900Black,
    Poppins_900Black_Italic,
  });

  // 字体未加载完成时显示加载提示
  if (!fontsLoaded) {
    return <View><Text>加载字体中...</Text></View>;
  }

  return (
    <View style={globalStyles.container}>
      <Text style={globalStyles.primaryButtonText}>主按钮文本</Text>
      <Text style={globalStyles.secondaryButtonText}>次要按钮文本</Text>
      <StatusBar style="auto" />
    </View>
  );
}

方法2：封装字体加载组件（代码解耦）

如果不想把字体加载逻辑写在根组件，可以封装成独立的FontLoader组件：

// components/FontLoader.js
import { useFonts, 
  Poppins_100Thin,
  Poppins_100Thin_Italic,
  Poppins_200ExtraLight,
  Poppins_200ExtraLight_Italic,
  Poppins_300Light,
  Poppins_300Light_Italic,
  Poppins_400Regular,
  Poppins_400Regular_Italic,
  Poppins_500Medium,
  Poppins_500Medium_Italic,
  Poppins_600SemiBold,
  Poppins_600SemiBold_Italic,
  Poppins_700Bold,
  Poppins_700Bold_Italic,
  Poppins_800ExtraBold,
  Poppins_800ExtraBold_Italic,
  Poppins_900Black,
  Poppins_900Black_Italic,
} from '@expo-google-fonts/poppins';
import { View, Text } from 'react-native';

export default function FontLoader({ children }) {
  let [fontsLoaded] = useFonts({
    Poppins_100Thin,
    Poppins_100Thin_Italic,
    Poppins_200ExtraLight,
    Poppins_200ExtraLight_Italic,
    Poppins_300Light,
    Poppins_300Light_Italic,
    Poppins_400Regular,
    Poppins_400Regular_Italic,
    Poppins_500Medium,
    Poppins_500Medium_Italic,
    Poppins_600SemiBold,
    Poppins_600SemiBold_Italic,
    Poppins_700Bold,
    Poppins_700Bold_Italic,
    Poppins_800ExtraBold,
    Poppins_800ExtraBold_Italic,
    Poppins_900Black,
    Poppins_900Black_Italic,
  });

  if (!fontsLoaded) {
    return <View><Text>加载字体中...</Text></View>;
  }

  return children;
}

然后在根组件中使用：

// App.js
import { StatusBar } from 'expo-status-bar';
import { View } from 'react-native';
import FontLoader from './components/FontLoader';
import { globalStyles } from './path/to/globalStyles';
import MainApp from './path/to/MainApp';

export default function App() {
  return (
    <FontLoader>
      <View style={globalStyles.container}>
        <MainApp />
        <StatusBar style="auto" />
      </View>
    </FontLoader>
  );
}

注意事项

你的全局样式表无需修改，只要字体在根组件加载完成，全局样式中定义的fontFamily（如Poppins_100Thin）就能自动匹配到已加载的字体。

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