React Native：无图标Bottom Tab Navigator标签文本样式设置求助

如果用的是React Navigation 6.x（当前主流版本），tabBarOptions已被弃用，需要在screenOptions里配置标签样式，同时明确隐藏图标，确保文本能占满标签空间实现居中放大：

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

const Tab = createBottomTabNavigator();

export default function BottomTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        // 隐藏底部标签图标
        tabBarShowIcon: false,
        // 设置标签文本样式
        tabBarLabelStyle: {
          fontSize: 18, // 放大文本尺寸
          textAlign: 'center', // 文本水平居中
          flex: 1, // 让文本占满标签项的可用空间，避免偏移
        },
        // 确保标签项内部内容垂直居中
        tabBarItemStyle: {
          justifyContent: 'center',
        },
      }}
    >
      <Tab.Screen name="首页" component={HomeScreen} />
      <Tab.Screen name="我的" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

如果仍在使用React Navigation 5.x，可以直接用tabBarOptions配置：

<Tab.Navigator
  tabBarOptions={{
    showIcon: false,
    labelStyle: {
      fontSize: 18,
      textAlign: 'center',
    },
  }}
>
  <Tab.Screen name="首页" component={HomeScreen} />
  <Tab.Screen name="我的" component={ProfileScreen} />
</Tab.Navigator>

关键注意点：

• 必须设置showIcon: false，否则底部标签会预留图标的空间，导致文本无法完全居中
• 给tabBarLabelStyle加flex:1可以让文本填充整个标签区域，避免因图标空间残留导致的偏移

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