React-navigation - 嵌套导航器中的返回行为（堆栈在抽屉内）

Question

我在 drawer 导航器中使用 stack 导航器 - 最近从 v4 升级。尝试在 headerLeft 上实现自定义后退按钮。 goBack 堆栈屏幕上的功能将返回抽屉导航器而不是 stack。我不知道我是否遗漏了什么或者它是否是 v5 上的错误。 goBack 应该转到 stack 中的上一个屏幕，而不是 drawer。请参阅下面的 gif；使用手势返回 stack，header 上的默认后退按钮也返回 stack。只有我的自定义后退按钮有问题。

export function BlogsStack({navigation}) {
  return (
    <Stack.Navigator
      initialRouteName={'Blogs'}
      screenOptions={{
        gestureEnabled: true,
        gestureDirection: 'horizontal',
        cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        headerStyle: {
          borderBottomWidth: 0,
          elevation: 0,
          shadowOpacity: 0,
        },
        headerTintColor: themeVars.headerTintColor,
        headerBackground: () => {
          return <HeaderBackground />;
        },
      }}>
      <Stack.Screen
        name="Blogs"
        component={Blogs}
        options={{
          title: 'Blogs',
          headerTitle: () => (
            <View>
              <HeaderButton title={'Blogs'} />
            </View>
          ),
          headerLeft: () => (
            <TouchableOpacity
              onPress={() => navigation.toggleDrawer()}
              style={drawerStyles.menuIconContainer}>
              <FeatherIcon
                style={drawerStyles.menuIcon}
                name="menu"
                size={themeVars.hamburgerIconSize}
                color={themeVars.hamburgerIconColor}
              />
            </TouchableOpacity>
          ),
          headerRight: () => <View />,
        }}
      />
      <Stack.Screen
        name="BlogSingle"
        component={BlogSingle}
        options={{
          headerTitle: () => (
            <View>
              <HeaderButton title={'Blog'} />
            </View>
          ),
          headerLeft: () => (
            <TouchableOpacity
              onPress={() => navigation.goBack()}
              style={drawerStyles.menuIconContainer}>
              <FeatherIcon
                style={drawerStyles.menuIcon}
                name="chevron-left"
                size={themeVars.hamburgerIconSize}
                color={themeVars.hamburgerIconColor}
              />
            </TouchableOpacity>
          ),
          headerRight: () => <View />,
        }}
      />
    </Stack.Navigator>
  );
}


export class Navigation extends Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    return (
      <NavigationContainer ref={navigationRef}>
        <AppDrawer.Navigator
          initialRouteName={'Home'}
          drawerContent={props => <DrawerContent {...props} />}
          drawerContentOptions={{
            labelStyle: {
              fontFamily: themeVars.boldFont,
              color: themeVars.primaryColor,
            },
            activeTintColor: 'black',
            activeBackgroundColor: 'black',
            inactiveTintColor: 'white',
            inactiveBackgroundColor: 'white',
            itemStyle: {
              marginVertical: 0,
              borderWidth: 1,
              borderColor: 'red',
              margin: 0,
              padding: 0,
            },
          }}>
          <AppDrawer.Screen
            name="Home"
            component={HomeStack}
            initialRouteName={'Home'}
            options={{
              drawerLabel: 'Home ',
              drawerIcon: () => (
                <FeatherIcon
                  color={themeVars.primaryColor}
                  name="home"
                  size={themeVars.drawerIconSize}
                />
              ),
            }}
          />
          <AppDrawer.Screen
            initialRouteName="Blogs"
            backBehavior="order"
            name="Blogs"
            component={BlogsStack}
            options={{
              drawerLabel: 'Blogs ',
              drawerIcon: () => (
                <FontAwesome5
                  color={themeVars.primaryColor}
                  name="wordpress"
                  size={themeVars.drawerIconSize}
                />
              ),
            }}
          />
        </AppDrawer.Navigator>
      </NavigationContainer>
    );
  }
}

Answer 1

我按照文档解决了我的问题。问题是我传递了错误的 navigation.

You need to use the correct navigation prop in your header, i.e. by defining a callback for the options: https://reactnavigation.org/docs/screen-options#options-prop-on-screen

You're using navigation prop passed from the parent navigator which is a drawer, so the action is performed in the drawer.

关注 git 问题：https://github.com/react-navigation/react-navigation/issues/8806