React Native 0.6 导航跳转子/兄弟页面时替换头部导航栏的实现问题

问题本质 #

你现在的自定义头部LogoTitle是配置在父级MainStack的Home路由参数里，属于父栈全局头部，只要在HomeStackScreens嵌套栈内的所有页面，默认都会继承显示这个父级头部，所以跳转至New页面时会出现父级头部和子栈头部叠加的问题。

方案1：动态控制父栈头部显示（无需修改原有栈结构） #

直接使用React Navigation自带的setOptions和getParentAPI就能实现，不需要额外引入Context。

1. 首先修改LogoTitle组件内的跳转逻辑，你当前用的reset会清空路由栈，跳转后没有返回箭头，换成navigate即可：

// LogoTitle组件内AntDesign图标的onPress事件
onPress={() => navigation.navigate('New')}

2. 在NewScreen组件内通过聚焦生命周期动态修改父栈头部显隐：

import { useFocusEffect } from '@react-navigation/native';

function NewScreen({ navigation }) {
  useFocusEffect(
    React.useCallback(() => {
      // 获取父栈MainStack的导航实例
      const parentNav = navigation.getParent();
      // 页面聚焦时隐藏父栈头部，仅显示子栈New页面的头部
      parentNav.setOptions({ headerShown: false });
      // 页面离开时恢复父栈的LogoTitle头部
      return () => {
        parentNav.setOptions({
          headerShown: true,
          headerTitle: () => <LogoTitle />
        });
      };
    }, [navigation])
  );

  // 此处保留你原有NewScreen的业务逻辑
  return <View>/* 页面内容 */</View>
}

方案2：父栈关闭全局头部，所有头部交给子栈管理（更易维护） #

如果后续嵌套栈内多个页面都需要自定义头部，更推荐这种方案，逻辑更清晰：

1. 修改MainStack的Home路由配置，关闭父栈全局头部：

<MainStack.Screen name="Home" options={{
  headerShown: false, // 关闭父栈全局头部
  tabBarLabel: '',
  tabBarIcon: ({ color }) => (
    <AntDesign name='home' backgroundColor='black' color={color} size={23} />
  )
}} component={HomeStackScreens} />

2. 把LogoTitle头部移到HomeStack的首页配置中：

<HomeStack.Screen name="Home" options={{ 
  headerTitle: () => <LogoTitle /> 
}} component={HomeScreen} />

修改完后跳转至New页面时，嵌套栈会自动切换头部，默认显示返回箭头+你配置的username标题，无需额外逻辑。

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