React Native中如何将Material Top Tab Navigator标签名设为单行显示？

要让Material Top Tab Navigator的标签名强制单行显示，核心是通过样式控制文字不换行，并调整tab项的布局避免挤压，具体实现如下：

核心解决方案 #

在Tab导航器的screenOptions（React Navigation 6+）或tabBarOptions（旧版本）中配置以下样式：

React Navigation 6+ 写法 #

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        // 控制标签文字样式
        tabBarLabelStyle: {
          whiteSpace: 'nowrap', // 强制文字单行显示
          overflow: 'hidden',   // 超出部分隐藏（可选）
          textOverflow: 'ellipsis', // 超出时显示省略号（可选）
        },
        // 控制每个tab项的布局
        tabBarItemStyle: {
          flexShrink: 1, // 允许tab项在空间不足时收缩，避免挤压换行
        },
      }}
    >
      <Tab.Screen name="非常长的标签名示例" component={Screen1} />
      <Tab.Screen name="标签2" component={Screen2} />
      <Tab.Screen name="标签3" component={Screen3} />
    </Tab.Navigator>
  );
}

旧版本（React Navigation 5及之前）写法 #

如果使用的是旧版本，需要调整为tabBarOptions配置：

<Tab.Navigator
  tabBarOptions={{
    labelStyle: {
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    },
    tabStyle: {
      flexShrink: 1,
    },
  }}
>
  {/* 屏幕组件配置 */}
</Tab.Navigator>

关键样式说明 #

• whiteSpace: 'nowrap'：这是实现单行显示的核心属性，强制文本不换行。
• flexShrink: 1：让每个tab项在导航栏空间不足时自动收缩，避免因宽度不够导致文字被迫换行。
• overflow: 'hidden' + textOverflow: 'ellipsis'：可选配置，当标签名过长超出tab宽度时，隐藏超出部分并显示省略号，提升视觉整洁度。

内容的提问来源于stack exchange，提问作者Siril m p