代码之家 › 专栏 › 技术社区 › Jason Gaare

React导航:如何防止从drawerNavigator外部调度openDrawer时堆栈弹出?

react-navigation react-native

0

Jason Gaare · 技术社区 · 7 年前

: https://snack.expo.io/Hkv4A8zjm

按第一页上的“打开抽屉”按钮
按第2页的“转到第3页”
按第3页的“打开抽屉”

当前行为

当前,当您按第3页上的“打开抽屉”时,抽屉会按预期打开,

预期行为

也许这不是预期的,更希望,但我希望能够打开菜单,而不必导航回第2页。用例是当我的页面不是顶级的,因此不包括在抽屉菜单中。但是,如果用户想在其他地方导航,我希望用户始终可以访问抽屉——但是如果他们关闭菜单而不选择其他页面,它应该将他们返回到他们离开的地方,而不是将他们导航到堆栈的后面。

有没有一种方法可以解决这个问题,或者用另一种方法来隐藏抽屉导航中的屏幕,但仍然允许它们从抽屉中的任何屏幕“按”出?

2 回复 | 直到 7 年前

1

0

vonovak 7 年前

在你的零食里,你试图打开抽屉 screen3

你需要修改应用程序的导航结构,例如: https://snack.expo.io/@vonovak/shallow-cake )

const Stack = createStackNavigator(
  {
    page2: { screen: Page2 },
    page3: { screen: Page3 },
  },
  {
    headerMode: 'none',
  }
);
const Navigator = createDrawerNavigator({
  page1: Page1,
  stack: Stack
});

2

0

Amal p 7 年前

尝试重置 stack page 2 to page 3

在我下面 navigating 到 login page 只需更改

routeName: '//YOUR PAGE'

使用以下代码进行导航:

const resetAction = NavigationActions.reset({
            index: 0,
            actions: [
              {
                type: 'Navigation/INIT',
                routeName: 'Login',
                params: {
                }
              }
            ]
          });
this.props.navigation.dispatch(resetAction);

在 android back button 您可以按照下面的建议实现 如果它是一个自定义工具栏或什么的,只需导航onClick事件

import { BackHandler } from 'react-native';

constructor(props) {
    super(props);
    this.state = {

    };
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
  }

  handleBackButtonClick() {
     // NAVIGATE BACK TO PAGE 2
  }