React-Native 抽屉菜单在 stack-Navigator 屏幕内打开

Question

在我的应用程序中，我有 3 个堆栈 StackOne

export const StackOne = createStackNavigator({
  OneScreen: { screen:one  },
  TwoScreen: { screen:two  },
  ThreeScreen: { screen:three  },
}, { initialRouteName: 'OneScreen', }
);

StackTwo

export const StackTwo = createStackNavigator({
  OneScreenTwo: { screen:oneTwo  },
  TwoScreenTwo: { screen:twoTwo  },
  ThreeScreenTwo: { screen:threeTwo  },
}, { initialRouteName: 'OneScreenTwo', }
);

我是这样使用抽屉式导航的。 MainDrawer

const MainDrawer = createDrawerNavigator(
  {
    One: { screen: StackOne },
    Two: { screen: StackTwo },
    Other: { screen: OtherScreen},
  },
  {}
);

一切正常。管理抽屉 - 堆放得很好 唯一的问题是当我在 StackOne's ScreenTwo 左右滑动时仍然打开抽屉菜单。 不仅在每个屏幕打开抽屉菜单中都有这个屏幕。

我试了好几个 link 都没有成功。 希望有人帮忙。 我关注这个linkNavigation

谢谢

Answer 1

您需要在 StackNavigator 上指定 navigationOptions 而不是 TwoScreen 等，否则它会配置 StackNavigator 而不是 DrawerNavigator:

StackOne.navigationOptions = ({ navigation }) => ({
  drawerLockMode: navigation.state.index === 0 ? 'unlocked' : 'locked-closed',
}); 

工作示例：https://snack.expo.io/@riwu/stack-nav-lock-drawer

Answer 2

export const StackOne = createStackNavigator({
  OneScreen: { screen:one  },
  TwoScreen: { screen:two  },
  ThreeScreen: { screen:three  },
}, { initialRouteName: 'OneScreen', }
);


StackOne.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.routes[navigation.state.index] != 'OneScreen') {
    drawerLockMode = 'locked-closed';
  }
  return {
    drawerLockMode,
  };
};


export const StackTwo = createStackNavigator({
  OneScreenTwo: { screen:oneTwo  },
  TwoScreenTwo: { screen:twoTwo  },
  ThreeScreenTwo: { screen:threeTwo  },
}, { initialRouteName: 'OneScreenTwo', }
);

StackTwo .navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.routes[navigation.state.index] != 'OneScreenTwo') {
    drawerLockMode = 'locked-closed';
  }
  return {
    drawerLockMode,
  };
};

创建导航选项并解决问题。