Material Top Tab Navigator上移过度问题修复咨询

我使用Material Top Tab Navigator实现了顶部标签导航器，功能正常，但标签栏过度上移（如图所示）。

我的代码：

const CartContainer = () => {
    const Tab = createMaterialTopTabNavigator();
  return (
        <Tab.Navigator
        screenOptions={{
          tabBarLabelStyle: { fontSize: 12 },
          tabBarItemStyle: { width: 100 },
          tabBarStyle: { backgroundColor: 'powderblue' },
        }}
        >
          <Tab.Screen name="Medicine" component={MedicineCart} />
          <Tab.Screen name="Lab" component={LabCart} />
        </Tab.Navigator>
        );
}

修复方案 #

标签栏上移通常是因为未适配系统状态栏高度，导致导航栏与状态栏重叠，以下两种方式可解决：

方式一：用SafeAreaView包裹导航器

SafeAreaView会自动适配设备安全区域，避免内容被状态栏遮挡：

import { SafeAreaView } from 'react-native';

const CartContainer = () => {
    const Tab = createMaterialTopTabNavigator();
  return (
        <SafeAreaView style={{ flex: 1 }}>
          <Tab.Navigator
            screenOptions={{
              tabBarLabelStyle: { fontSize: 12 },
              tabBarItemStyle: { width: 100 },
              tabBarStyle: { backgroundColor: 'powderblue' },
            }}
          >
            <Tab.Screen name="Medicine" component={MedicineCart} />
            <Tab.Screen name="Lab" component={LabCart} />
          </Tab.Navigator>
        </SafeAreaView>
        );
}

方式二：手动给标签栏添加状态栏高度内边距

通过StatusBar.currentHeight获取状态栏高度，在tabBarStyle中设置paddingTop：

import { StatusBar } from 'react-native';

const CartContainer = () => {
    const Tab = createMaterialTopTabNavigator();
  return (
        <Tab.Navigator
        screenOptions={{
          tabBarLabelStyle: { fontSize: 12 },
          tabBarItemStyle: { width: 100 },
          tabBarStyle: { 
              backgroundColor: 'powderblue',
              paddingTop: StatusBar.currentHeight || 0 
          },
        }}
        >
          <Tab.Screen name="Medicine" component={MedicineCart} />
          <Tab.Screen name="Lab" component={LabCart} />
        </Tab.Navigator>
        );
}

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