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

Question

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

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

有人对如何将某些内容放在标题后退按钮左侧有任何建议或示例吗？

Answer 1

是的，headerBackVisible不与 合作headerLeft。作为解决方法，您可以HeaderBackButton从 @react-navigation/stack 导入默认后退按钮 ( ) 并将其与汉堡包组件一起返回。像这样的事情：

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