react-native - 堆栈导航器后退按钮左侧的菜单按钮，headerBackVisible : true not working

Question

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

我在文档中找到了设置 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