反应导航-嵌套导航器中的goBack行为堆叠在抽屉中

问题描述

我在stack导航器中使用了drawer导航器-最近从v4升级。尝试在headerLeft上实现自定义后退按钮。堆栈屏幕上的goBack函数将返回抽屉导航器而不是stack。我不知道我是否缺少某些内容，或者是否是v5上的错误。 goBack应该转到stack而不是drawer中的上一个屏幕。参见下面的gif；使用该手势会在stack上返回，并且标题上的默认后退按钮也会返回到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>
          ),}}
      />
    </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>
    );
  }
}

解决方法

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

您需要在标题中使用正确的导航道具，即通过 为选项定义回调： https://reactnavigation.org/docs/screen-options#options-prop-on-screen

您正在使用从父导航器传递的导航道具 一个抽屉，所以动作在抽屉里执行。

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