堆栈导航器后退按钮左侧的菜单按钮，headerBackVisible：true 不工作

Question

我正在使用嵌套在抽屉导航器中的堆栈导航器，用于使用反应导航 6 的反应本机应用程序。我只显示堆栈导航器的 header。我想在 header 的最左侧放置一个汉堡菜单按钮，但我还希望显示默认的堆栈导航后退按钮。

我在文档中找到了 headerBackVisible 设置，但找不到任何人使用它的示例，所以我不确定我是否正确使用它。我试图在我的屏幕选项中将其作为 headerBackVisible: true 传递。无论我做什么，如果我在 headerLeft 中放置任何其他内容，我都无法显示 header 后退按钮。

有人对如何在 header 后退按钮的左侧放置内容有任何建议或示例吗？

Answer 1

是的，headerBackVisible 不适用于 headerLeft。作为解决方法，您可以从 @react-navigation/stack 和 return 中导入默认后退按钮 (HeaderBackButton) 以及您的汉堡包组件。像这样：

import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';

  <Stack.Navigator
    screenOptions={({ navigation, route }) => ({
      headerLeft: (props) => {
        return (
          <>
            <Text>Menu</Text> // Replace with your hamburger component
            {props.canGoBack && <HeaderBackButton {...props} />}  // THIS IS WHAT YOU NEED
          </>
        );
      },
    })}> ....
    <Stack.Screen ... />
    <Stack.Screen ... />
  </Stack.Navigator>

小吃link：https://snack.expo.dev/@rabiarashid/react-navigation---stack-navigator-example

更新（针对 react-navigation v6）：

在 v6 中，HeaderBackButton 被移动到元素库中，即

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

参考：https://reactnavigation.org/docs/upgrading-from-5.x/#some-exports-are-now-moved-to-the-element-library

堆栈导航器后退按钮左侧的菜单按钮，headerBackVisible：true 不工作

Menu Button To Left Of Stack Navigator Back Button, headerBackVisible: true not working

react-native

react-navigation

更新（针对 react-navigation v6）：