如何在createBottomTabNavigator中实现标签栏居顶？不想使用createMaterialTopTabNavigator

虽然createBottomTabNavigator默认标签栏在底部，但可以通过自定义样式完全实现标签栏居顶、内容区在下方的效果，无需切换到createMaterialTopTabNavigator。核心思路是调整标签栏的定位样式，同时给内容区预留顶部空间，既保留原组件的转场动画和外观自定义能力，又达到类似顶部标签栏的布局。

实现代码示例（React Navigation v6） #

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, Text } from 'react-native';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        // 将标签栏固定在顶部
        tabBarStyle: {
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: 56, // 自定义标签栏高度
          backgroundColor: '#fff',
          borderBottomWidth: 1,
          borderBottomColor: '#eee',
        },
        // 给内容区设置顶部内边距，避免被标签栏遮挡
        contentStyle: {
          paddingTop: 56, // 与标签栏高度保持一致
        },
        // 可按需自定义标签外观，比如图标与文字的位置
        tabBarLabelPosition: 'beside-icon',
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: '首页' }} />
      <Tab.Screen name="Profile" component={ProfileScreen} options={{ tabBarLabel: '我的' }} />
    </Tab.Navigator>
  );
}

// 示例页面组件
function HomeScreen() {
  return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>首页内容</Text></View>;
}

function ProfileScreen() {
  return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>我的内容</Text></View>;
}

React Navigation v5 适配写法 #

如果使用v5版本，只需将样式配置移到tabBarOptions中，核心逻辑不变：

<Tab.Navigator
  tabBarOptions={{
    style: {
      position: 'absolute',
      top: 0,
      height: 56,
      borderBottomWidth: 1,
      borderBottomColor: '#eee',
    },
  }}
>
  {/* 页面配置 */}
</Tab.Navigator>

你可以根据需求自由调整tabBarStyle里的背景色、边框、高度等样式，也能通过tabBarIcon、tabBarActiveTintColor等属性定制标签的选中/未选中状态，完全适配你的外观需求。

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