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

Question

我正在使用嵌套在抽屉导航器中的堆栈导航器，用于使用反应导航 6 的反应原生应用程序。我只显示堆栈导航器的标题。我想在标题的最左侧放置一个汉堡菜单按钮，但我还希望出现默认的堆栈导航返回按钮。

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

有人对如何在页眉后退按钮左侧有任何建议或示例吗？

Answer 1

是的，headerBackVisible 不能与 headerLeft 一起使用。作为一种解决方法，您可以从 @react-navigation/stack 导入默认后退按钮 (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>

小吃链接：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