时间戳

首页 > 解决方案 > 堆栈导航器后退按钮左侧的菜单按钮，headerBackVisible：true 不起作用

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

问题描述

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

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

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

标签： react-nativereact-navigation

解决方案

是的，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

推荐阅读