React Native中Bottom Tab Navigator自定义字体使用问题排查

你的问题出在样式属性的使用位置错误：你把字体样式写在了screenOptions的style字段里，但这个字段是用来设置Tab Navigator容器的样式，而非底部标签文字的样式。以下是两种可行的修正方案：

方案一：使用tabBarLabelStyle直接设置文字样式 #

修改Tab.Navigator的screenOptions，将字体样式移到tabBarLabelStyle中：

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomePage from '../src/HomePage';
import TransfersPage from '../src/TransfersPage';
import ProfilesPage from '../src/ProfilePage';
import SettingsPage from '../src/SettingsPage';
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

function BottomNavigation() {
  return (
    <Tab.Navigator screenOptions={({route}) => ({
        headerShown: false,
        // 用tabBarLabelStyle控制标签文字样式
        tabBarLabelStyle: {
            fontFamily: 'Poppins-Medium',
            fontSize: 14, // 27字号过大，底部标签无法正常显示，建议调整为合适大小
            color: '#00BB23'
        },
        tabBarIcon:({color, size, focused}) =>{
            let iconName;

            if (route.name ==='HomePage'){
                iconName = focused ? 'ios-home-sharp' : 'ios-home-outline'
            }else if(route.name ==='Transfers'){
                iconName = focused ? 'ios-send-sharp' : 'ios-send-outline'
            }else if(route.name ==='Profile'){
                iconName = focused ? 'ios-person-sharp' : 'ios-person-outline'
            }else if(route.name ==='Settings'){
                iconName = focused ? 'ios-settings-sharp' : 'ios-settings-outline'
            }

            return <Icon name={iconName} size={27} color={"#00BB23"} />
        }
    })}>
      <Tab.Screen name="HomePage" component={HomePage} />
      <Tab.Screen name="Transfers" component={TransfersPage} />
      <Tab.Screen name="Profile" component={ProfilesPage} />
      <Tab.Screen name="Settings" component={SettingsPage} />
    </Tab.Navigator>
  );
}

export default BottomNavigation;

方案二：自定义tabBarLabel组件（更灵活） #

如果需要根据标签聚焦状态调整样式，可以自定义tabBarLabel组件，直接使用Text组件指定字体：

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomePage from '../src/HomePage';
import TransfersPage from '../src/TransfersPage';
import ProfilesPage from '../src/ProfilePage';
import SettingsPage from '../src/SettingsPage';
import Icon from 'react-native-vector-icons/Ionicons';

const Tab = createBottomTabNavigator();

function BottomNavigation() {
  return (
    <Tab.Navigator screenOptions={({route, focused}) => ({
        headerShown: false,
        // 自定义标签文字组件
        tabBarLabel: () => (
          <Text style={{
            fontFamily: 'Poppins-Medium',
            fontSize: 14,
            color: focused ? '#00BB23' : '#888' // 聚焦时显示指定颜色，未聚焦时灰色
          }}>
            {/* 可自定义显示的文字，比如把HomePage改成"首页" */}
            {route.name === 'HomePage' ? '首页' : route.name}
          </Text>
        ),
        tabBarIcon:({size}) =>{
            let iconName;

            if (route.name ==='HomePage'){
                iconName = focused ? 'ios-home-sharp' : 'ios-home-outline'
            }else if(route.name ==='Transfers'){
                iconName = focused ? 'ios-send-sharp' : 'ios-send-outline'
            }else if(route.name ==='Profile'){
                iconName = focused ? 'ios-person-sharp' : 'ios-person-outline'
            }else if(route.name ==='Settings'){
                iconName = focused ? 'ios-settings-sharp' : 'ios-settings-outline'
            }

            return <Icon name={iconName} size={27} color={focused ? '#00BB23' : '#888'} />
        }
    })}>
      <Tab.Screen name="HomePage" component={HomePage} />
      <Tab.Screen name="Transfers" component={TransfersPage} />
      <Tab.Screen name="Profile" component={ProfilesPage} />
      <Tab.Screen name="Settings" component={SettingsPage} />
    </Tab.Navigator>
  );
}

export default BottomNavigation;

额外注意事项 #

• 确认自定义字体已正确配置到项目中（iOS需在Info.plist注册，Android需将字体文件放入android/app/src/main/assets/fonts），你提到其他组件可正常使用，这一步应该没问题，但如果仍不生效可再次核对字体文件名和注册名称是否完全一致。

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