Expo应用使用React Navigation实现底部Tab导航时重载后高度被压扁的问题问询

基于Expo开发移动应用，采用@react-navigation/bottom-tabs的createBottomTabNavigator实现底部标签导航，共配置3个路由Tab项，每个Tab包含对应页面名称的文本标签和功能图标。

异常表现 #

• 应用首次从Expo加载启动时，底部Tab导航出现高度被压扁的异常状态：图标排布在文字左侧，整个导航条厚度极薄。
• 触发iOS系统双击Home键调出后台应用列表、或安卓端点击多任务按钮切后台再回到应用的操作后，导航会恢复为图标在上、文字在下的正常排布效果。
• 在三个Tab页面间来回切换无法触发布局恢复，只有切后台再返回的操作可以让布局回归正常。

问题代码片段 #

import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AntDesign, Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();
const HomeTab = createStackNavigator();
const UserProfileTab = createStackNavigator();
const NutritionTab = createStackNavigator();

function UserProfileScreen() {
  return (
    <UserProfileTab.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: Colors.topNavBar
        },
        headerTitleAlign: 'center'
      }}>
      <UserProfileTab.Screen name="Profile" component={UserProfile} />
    </UserProfileTab.Navigator>
  );
}

function NutritionScreen() {
  return (
    <NutritionTab.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: Colors.topNavBar
        },
        headerTitleAlign: 'center'
      }}>
      <NutritionTab.Screen name="Nutrition" component={Nutrition} />
    </NutritionTab.Navigator>
  );
}

function BottomTabs() {
  return (
    <>
      <SafeAreaView style={{ flex: 0, backgroundColor: Colors.topNavBar }} />
      <SafeAreaView style={{ flex: 1, backgroundColor: Colors.topNavBar }}>
        <Tab.Navigator
          initialRouteName="Home"
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;

              if (route.name === 'Home') {
                iconName = focused ? 'home' : 'home';
              } else if (route.name === 'Profile') {
                iconName = focused ? 'user' : 'user';
              } else if (route.name === 'Nutrition') {
                iconName = focused ? 'md-nutrition' : 'md-nutrition';
              }

              if (route.name === 'Nutrition') {
                return <Ionicons name={iconName} size={size} color={color} />
              }
              return <AntDesign name={iconName} size={size} color={color} />;
            },
          })}
          tabBarOptions={{
            activeTintColor: Colors.bottomNavBarActive,
            inactiveTintColor: Colors.bottomNavBarInactive,
            tabStyle: styles.tabStyle,
            labelStyle: styles.tabLabel,
          }}>
          <Tab.Screen
            name="Nutrition"
            component={NutritionScreen}
            options={{ tabBarLabel: 'Nutrition' }}
          />
          <Tab.Screen
            name="Home"
            component={MainStackNavigator}
          />
          <Tab.Screen
            name="Profile"
            component={UserProfileScreen}
            options={{ tabBarLabel: 'Profile' }}
          />
        </Tab.Navigator>
      </SafeAreaView>
    </>
  )
}

const styles = StyleSheet.create({
  tabStyle: {
    backgroundColor: Colors.boxColor,
  },
  tabLabel: {
    fontSize: 14,
  },
});

export default function App() {
  return (
    <NavigationContainer>
      <BottomTabs />
    </NavigationContainer>
  );
}

问题解答 #

这个问题是React Navigation与Expo组合开发中的已知共性问题，并非个例。

根因 #

• 启动初始阶段，底部Tab组件未获取到准确的设备安全区域参数，默认布局计算逻辑失效，触发了紧凑横向排布的 fallback 样式。
• 代码中手动嵌套两层SafeAreaView的写法，会干扰组件自身的安全区域计算流程：应用刚启动时，系统还未完成安全区域传感器的数据初始化，外层SafeAreaView的高度计算异常压缩了Tab栏可用空间；当应用切后台再返回时，系统会重新触发安全区域数据计算，组件拿到正确参数后布局自动恢复正常。

修复步骤 #

• 移除手动嵌套的两层SafeAreaView包裹层。React Navigation v5及以上版本的底部Tab组件已内置安全区域适配逻辑，额外的手动嵌套会破坏原有布局计算规则。
• 替换已废弃的tabBarOptions配置项，将原有样式迁移到新版screenOptions参数中：
  • 激活、非激活状态的文字颜色，分别对应tabBarActiveTintColor、tabBarInactiveTintColor配置项
  • Tab项的背景色，配置在tabBarStyle属性内
  • 标签文字的样式，对应tabBarLabelStyle配置项
• 在tabBarStyle中显式固定Tab栏高度，比如设置height: 60，并根据设备底部安全区域补充对应paddingBottom值，避免动态计算的不确定性。
• 校验依赖版本，将@react-navigation/bottom-tabs升级到6.0以上版本，低版本存在安全区域计算的已知bug，切后台重绘的布局异常在后续版本中已做对应修复。

该异常并非Expo独有的故障，在纯React Native项目中，只要存在相同的版本依赖和双层SafeAreaView嵌套写法，都可能触发同类初始布局问题。

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