React Navigation (V2)：如何防止（锁定）抽屉在嵌套堆栈中打开？答案

【问题标题】：React Navigation (V2): How to prevent (lock) the drawer from opening within a nested stack?React Navigation (V2)：如何防止（锁定）抽屉在嵌套堆栈中打开？
【发布时间】：2018-09-05 09:12:36
【问题描述】：

我正在使用 React Native 构建一个应用，并使用 React Navigation 进行导航。

为了能够为堆栈提供模式和常规卡片转换以及汉堡菜单，我将HomeStack 嵌套在我的MainStack 中，该MainDrawer 位于我的MainDrawer 中。

代码如下：

const HomeStack = createStackNavigator({...});
const MainStack = createStackNavigator({ HomeStack, ... }, { mode: "modal" });
const MainDrawer = createDrawerNavigator({ MainStack, ... });

问题在于，在我的HomeStack 的页面内，预计用户会进行滑动动作，这通常会导致意外打开抽屉。因此，当屏幕被推到抽屉上时，我想锁定HomeStack 的抽屉。

问题来了：The docs give this solution，但这在我的情况下不起作用，因为堆栈嵌套在另一个堆栈中。

// What I tried and what (obviously?) won't work
HomeStack.navigationOptions = ({ navigation }) => {
  let drawerLockMode = "unlocked";
  if (navigation.state.index > 0) {
    drawerLockMode = "locked-closed";
  }
  return {
    drawerLockMode
  };
};

MainStack.navigationOptions = ({ navigation }) => {
  let drawerLockMode = "unlocked";
  if (navigation.state.index > 0) {
    drawerLockMode = "locked-closed";
  }
  return {
    drawerLockMode
  };
};

有什么方法可以知道子堆栈的状态，以便我可以使用类似的技术来锁定抽屉？

// Example pseudo code:
MainStack.navigationOptions = ({ navigation }) => {
  let drawerLockMode = "unlocked";
  if (navigation.state.HomeStack.state.index > 0) { // here!
    drawerLockMode = "locked-closed";
  }
  return {
    drawerLockMode
  };
};

我该如何解决这个问题？

【问题讨论】：

标签： react-native locking react-navigation drawer

【解决方案1】：

The same doc 提供了另一个选项（推荐）来重新排列堆栈。它的工作原理是将抽屉与需要锁定抽屉的屏幕一起放在主堆栈中。

这里的另一个选项是添加另一个堆栈导航器作为抽屉导航器的父级，并将详细信息屏幕放在那里。这是推荐的。

【讨论】：