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

Question

我在我的项目中使用了反应导航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>