如何在React Native中禁用@react-navigation/material-bottom-tabs底部标签栏自动字体缩放

你之前的两种写法失效主要有两个原因：

• tabBarOptions 是React Navigation v5及更早版本的配置属性，v6+版本已经废弃该属性，相关配置均迁移到 screenOptions 或单路由的 options 根层级下
• 自定义 tabBarLabel 传入Text组件时，可能被组件内部的标签文本组件二次包裹，导致allowFontScaling属性未透传生效

问题现象示例：

方案1：全局统一配置所有标签 #

直接在Tab导航器的screenOptions中配置全局生效的字体缩放开关，适合所有标签统一禁用的场景：

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

const Tab = createMaterialBottomTabNavigator();

function AppTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          // 全局禁用标签栏文本字体缩放
          tabBarAllowFontScaling: false,
          // 可搭配固定字体尺寸使用
          tabBarLabelStyle: {
            fontSize: 12
          }
        }}
      >
        {/* 你的路由配置 */}
        <Tab.Screen 
          name="Home" 
          component={HomeScreen}
          options={{
            tabBarIcon: ({color}) => <Home fill={color} stroke={color} width={24} height={24} />
          }}
        />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

方案2：单独为指定标签配置 #

如果只需要禁用部分标签的字体缩放，在对应路由的options中单独配置即可：

<Tab.Screen 
  name="Home" 
  component={HomeScreen}
  options={{
    tabBarLabel: "HOME",
    tabBarIcon: ({color}: {color: string}) => (
      <Home fill={color} stroke={color} width={24} height={24} />
    ),
    // 仅当前标签禁用字体缩放
    tabBarAllowFontScaling: false,
    tabBarLabelStyle: {
      fontSize: 12
    }
  }}
/>

方案3：适配react-native-paper主题（备选） #

@react-navigation/material-bottom-tabs 内部依赖react-native-paper组件库，如果上述两种方案未生效，可以通过自定义react-native-paper全局主题统一禁用字体缩放：

import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';

const customTheme = {
  ...DefaultTheme,
  fonts: Object.fromEntries(
    Object.entries(DefaultTheme.fonts).map(([fontType, fontConfig]) => [
      fontType,
      { ...fontConfig, allowFontScaling: false }
    ])
  )
};

// 根组件包裹PaperProvider传入自定义主题
export default function App() {
  return (
    <PaperProvider theme={customTheme}>
      <AppTabs />
    </PaperProvider>
  );
}

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