React Navigation自定义Header中如何控制返回按钮显示？

首先明确：back参数是React Navigation自动根据栈的导航状态生成的，不需要你手动触发——当当前页面不是栈的第一个页面时，back参数会自动带上上一页的相关信息；如果是栈顶第一个页面，back就是undefined。你的问题出在写法上，没有正确接收这个参数。

正确的实现方式 #

方式1：在Stack.Screen的options里配置自定义Header（推荐） #

直接在路由配置里定义header函数，让React Navigation自动传入包括back在内的所有参数：

import { getHeaderTitle } from '@react-navigation/elements';

// 假设你的栈导航配置
<Stack.Navigator>
  <Stack.Screen 
    name="Home" 
    component={HomeScreen}
    options={{ header: () => <MyHeader title="首页" /> }} // 首页不需要返回按钮
  />
  <Stack.Screen 
    name="SomeScreen" 
    component={SomeScreen}
    options={({ navigation, route, options, back }) => ({
      header: () => (
        <MyHeader
          title={getHeaderTitle(options, route.name)}
          leftButton={back ? <MyBackButton onPress={navigation.goBack} /> : undefined}
          style={options.headerStyle}
        />
      )
    })}
  />
</Stack.Navigator>

方式2：在组件内部动态设置（仅需动态修改时使用） #

如果必须在组件内通过setOptions修改Header，也要确保header函数接收back参数，而不是写死：

const SomeScreen = () => {
  const { navigation, route } = useNavigation();
  const title = "详情页"; // 可根据业务逻辑动态获取

  useEffect(() => {
    navigation.setOptions({
      // 这里要接收React Navigation传入的参数，包括back
      header: ({ back, options }) => (
        <MyHeader
          title={title}
          leftButton={back ? <MyBackButton onPress={navigation.goBack} /> : undefined}
          style={options.headerStyle}
        />
      )
    });
  }, [navigation, title]);

  return (
    <Layout>
      <View style={[screenStyles.screenTopPadding, screenStyles.screenPadding]}>
      </View>
    </Layout>
  );
};

关键要点 #

• 不要在header函数里硬写leftButton，一定要通过back参数判断——React Navigation会自动根据栈的层级决定back是否存在。
• 全局路由配置优先于组件内的setOptions，推荐在路由配置里统一管理Header逻辑，避免重复代码。
• getHeaderTitle可以帮你正确获取配置的title（不管是在Stack.Screen的options里设置的，还是navigation.setOptions设置的），建议使用它来统一title来源。

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