我们如何在React Navigation v5.0中使用抽屉锁模式

Question

我在我的项目中使用React Navigation v5.0。 在以前的版本中，有一个名为“ drawerLockMode”的选项，通过该选项我们可以禁止在特定屏幕中打开导航抽屉的滑动手势。 如何在v5.0中使用此选项？

Answer 1

使用gestureEnabled选项

是否可以使用手势打开或关闭抽屉。默认为true。

https://reactnavigation.org/docs/en/drawer-navigator.html#gestureenabled

Answer 2

如果使用内部功能组件，请使用React的useLayoutEffect（）钩子，如下所示：

function HomeStackNavigator({navigation, route}) {
  const dispatch = useDispatch();

  //Lock drawer on all screens except the first one i.e. Home
  React.useLayoutEffect(() => {

    route.state !== undefined
      ? route.state.index > 0
        ? navigation.setOptions({gestureEnabled: false})
        : navigation.setOptions({gestureEnabled: true})
      : null;
  }, [navigation, route]);

  return (
    <Stack.Navigator initialRouteName="Home" headerMode="none">
     ...
    </Stack.Navigator>