如何为整个Expo/React Native项目全局应用Google Fonts？

下面给你两种实用方案，直接解决重复导入问题，还能把字体设为全局默认：

方法一：给React Navigation配置全局主题 #

既然你已经用了React Navigation，直接修改导航主题就能让所有导航组件（标题、按钮等）自动用Montserrat，同时自己的组件也能复用这个字体配置。

修改你的App.js：

import { Provider } from 'react-redux'
import store from './redux/store'

// 别忘了导入DefaultTheme
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import { useFonts, Montserrat_400Regular,} from '@expo-google-fonts/montserrat';
import { HomeScreen } from './components/HomeScreen';
import { AddItemScreen } from './components/AddItemScreen';
import { DetailedDayView } from './components/DetailedDayView';

// 自定义主题，替换默认字体
const CustomTheme = {
  ...DefaultTheme,
  fonts: {
    ...DefaultTheme.fonts,
    regular: Montserrat_400Regular,
    // 要是需要粗体，先加载对应的字体，再添加此行：bold: Montserrat_700Bold,
  },
};

export default function App() {
  const Stack = createNativeStackNavigator()

  let [fontsLoaded] = useFonts({
    Montserrat_400Regular,
    // 粗体的话在这里也得加载：Montserrat_700Bold,
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <Provider store={store}>
      {/* 把自定义主题传给NavigationContainer */}
      <NavigationContainer theme={CustomTheme}>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="AddItemScreen" component={AddItemScreen} />
          <Stack.Screen name="DetailedDayView" component={DetailedDayView} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

配置完成后，导航自带的组件会自动使用Montserrat字体，你自己写Text组件时，也可以直接指定fontFamily: 'Montserrat_400Regular'，无需再次导入字体文件。

方法二：封装全局Text组件 #

要是想让自己编写的所有文本都不用手动添加fontFamily，可以封装一个全局Text组件，之后所有页面都用这个组件即可。

新建components/GlobalText.js：

import { Text } from 'react-native';

const GlobalText = ({ style, ...props }) => {
  // 内置默认字体，传入的style会覆盖默认样式
  return (
    <Text style={[{ fontFamily: 'Montserrat_400Regular' }, style]} {...props} />
  );
};

export default GlobalText;

在业务组件中直接使用：

import GlobalText from './components/GlobalText';

const HomeScreen = () => {
  return (
    <>
      <GlobalText>这是全局默认字体的文本</GlobalText>
      <GlobalText style={{ fontSize: 20, fontWeight: 'bold' }}>加粗的文本</GlobalText>
    </>
  );
};

额外优化：替换加载占位 #

原来的return null会导致页面加载时空白，推荐用expo-app-loading显示加载状态：

1. 先安装依赖：npx expo install expo-app-loading
2. 修改App.js里的加载判断逻辑：

import AppLoading from 'expo-app-loading';

// ...其他代码

if (!fontsLoaded) {
  return <AppLoading />;
}

两种方案可以结合使用：导航主题管理导航自带组件的字体，全局Text组件管理自定义内容的字体，彻底告别重复导入。

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