深色模式下React Navigation开启fullScreenGestureEnabled后切换屏幕出现空白头部

我在使用@react-navigation结合NativeStackNavigator和BottomTabNavigator开发时，设置fullScreenGestureEnabled=true后，深色模式下屏幕切换过程中会出现一块白色的空白头部背景。

问题演示动图：

演示代码（App.js）：

import { DarkTheme, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, Pressable, Text, StyleSheet, StatusBar } from 'react-native';

const Tab = createBottomTabNavigator();

function HomeScreen(props) {
  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => {
          props.navigation.push('Detail')
        }}
      >
      <Text> Go to detail</Text>
      </Pressable>
    </View>
  )
}

function Screen(props) {
  return (
    <View style={styles.container}>
      <Text>{props.route.name}</Text>
    </View>
  )
}

function MainTabs(props) {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={Screen} />
    </Tab.Navigator>
  );
}

const Stack = createNativeStackNavigator()
function AppStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        fullScreenGestureEnabled: true,
      }}
    >
      <Stack.Screen name="Main" component={MainTabs}
        options={{ headerShown: false }}
      />
      <Stack.Screen name="Detail" component={Screen} />
      <Stack.Screen name="Profile" component={Screen} />
      <Stack.Screen name="Settings Detail" component={Screen} />
    </Stack.Navigator>
  )
}

export default function App() {
  return (
    <NavigationContainer theme={DarkTheme}>
      <StatusBar style='inverted' />
      <AppStack />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#444444',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

我曾尝试隐藏Tab导航器内屏幕的头部，保留外层Stack头部，但无法找到更新title文本的合适方法。

可行解决方案 #

1. 统一全局头部背景色适配深色主题

问题根源是手势过渡时系统默认头部背景未同步深色主题，直接在Stack导航器的全局配置中设置头部背景色为深色主题的背景色即可：

function AppStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        fullScreenGestureEnabled: true,
        // 统一头部背景色为深色主题背景
        headerStyle: {
          backgroundColor: DarkTheme.colors.background,
        },
      }}
    >
      <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
      <Stack.Screen name="Detail" component={Screen} />
      <Stack.Screen name="Profile" component={Screen} />
      <Stack.Screen name="Settings Detail" component={Screen} />
    </Stack.Navigator>
  )
}

2. 自定义头部组件完全控制样式

如果需要更灵活的头部样式，可以自定义头部组件，确保过渡过程中样式一致：

import React from 'react';

function CustomHeader({ title }) {
  return (
    <View style={{
      backgroundColor: DarkTheme.colors.background,
      paddingTop: StatusBar.currentHeight,
      height: 56 + (StatusBar.currentHeight || 0),
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      <Text style={{ 
        color: DarkTheme.colors.text, 
        fontSize: 18, 
        fontWeight: '500' 
      }}>
        {title}
      </Text>
    </View>
  );
}

// 在Stack导航器中使用自定义头部
function AppStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        fullScreenGestureEnabled: true,
        header: ({ options }) => <CustomHeader title={options.title} />,
      }}
    >
      {/* 其他屏幕配置 */}
    </Stack.Navigator>
  )
}

3. 解决Tab切换时外层Stack标题更新问题

针对隐藏Tab内头部后无法更新外层Stack标题的需求，可以通过监听Tab导航器的状态变化，动态更新外层Stack的标题：

function MainTabs({ navigation, route }) {
  React.useEffect(() => {
    // 获取外层Stack导航器实例
    const parentNav = navigation.getParent();
    if (parentNav && route.state) {
      // 获取当前激活的Tab页面名称，更新外层标题
      const activeTabName = route.state.routes[route.state.index].name;
      parentNav.setOptions({ title: activeTabName });
    }
  }, [navigation, route.state]);

  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={Screen} />
    </Tab.Navigator>
  );
}

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