如何在react native + expo的导航选项卡中使用自定义字体？

const registerFonts = () => {
  const customFonts = {
    'CustomFont-Regular': require('../assets/fonts/CustomFont-Regular.ttf'),
    // 添加其他自定义字体
  };

  Object.keys(customFonts).forEach((font) => {
    Expo.Font.loadAsync(customFonts[font]);
  });
};

export default registerFonts;

import registerFonts from './expo-asset-plugin';

registerFonts();

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused ? 'home' : 'home-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'settings' : 'settings-outline';
            }

            // 返回自定义图标组件
            return <Icon name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'blue',
          inactiveTintColor: 'gray',
          labelStyle: {
            fontFamily: 'CustomFont-Regular', // 使用自定义字体
          },
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;