如何防止导航器的抽屉滑动手势

Question

我正在使用React Navigation 5+。他们改变了您配置导航器的方式，我正在尝试在程序中实现它。我有一个DrawerNavigator作为顶级导航器。第一个屏幕是带有几个屏幕的StackNavigator。我正在寻找一种方法，以防止用户在除第一个屏幕之外的所有屏幕上滑动打开的抽屉。这是我的导航器文件：

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function CheckinStack() {
    return (
        <Stack.Navigator
            initialRouteName={"Loading"}
            headerMode={"none"}
        >
            <Stack.Screen 
                name={"Search Locations"} 
                component={SearchLocationsScreen} 
                options={{gestureEnabled: true}}
            />
            <Stack.Screen 
                name={"Check In Form"} 
                component={CheckInFormScreen} 
                options={{gestureEnabled: false}}
            />
            <Stack.Screen 
                name={"Checked In"} 
                component={CheckedInScreen} 
                options={{gestureEnabled: false}}
            />
            <Stack.Screen 
                name={"Business Details"} 
                component={BusinessDetailsScreen} 
                options={{gestureEnabled: false}}
            />
        </Stack.Navigator>
    );
}

function MainDrawer() {
    return (
        <Drawer.Navigator >
            <Drawer.Screen name={"Search Locations"} component={CheckinStack}/>
            <Drawer.Screen name={"About"} component={AboutScreen}/>
            <Drawer.Screen name={"Favorites"} component={FavoritesScreen}/>
            <Drawer.Screen name={"Profile"} component={ProfileScreen}/>
            <Drawer.Screen name={"Report Issues"} component={ReportIssuesScreen}/>
        </Drawer.Navigator>
    );
}

const NavContainer = (props) => {
    return (
        <NavigationContainer>
            <MainDrawer />
        </NavigationContainer>
    )
};

export default NavContainer

如您所见，我试图在除一个屏幕（这是我的主屏幕）上的每个屏幕上都将gestureEnabled设置为false。没有作用。如果我在导航器本身上将gestureEnabled设置为false，它将阻止在所有屏幕上进行抽屉滑动手势。

我已经在屏幕内尝试过这样的代码：

CheckInFormScreen.navigationOptions = navData => {
    return {
        gestureEnabled: false
    }
};

我并不是真的希望这能奏效，但我只是在扔东西。如何允许用户在NavigationStack的SearchLocations屏幕上滑动打开抽屉，但在NavigationStack的其余屏幕上不能滑动？

Answer 1

更新：如果以下代码不起作用，请参考Screen options resolution

您尝试使用'drawerLockMode'

FeedStack.navigationOptions = () => {
   return { drawerLockMode: 'locked-closed' }
}

我认为您可以在选项中添加此道具

function CheckinStack() {
    return (
        <Stack.Navigator
            initialRouteName={"Loading"}
            headerMode={"none"}
        >
            <Stack.Screen 
                name={"Search Locations"} 
                component={SearchLocationsScreen} 
            />
            <Stack.Screen 
                name={"Check In Form"} 
                component={CheckInFormScreen}
                options={{drawerLockMode: 'locked-closed'}} 
            />
            <Stack.Screen 
                name={"Checked In"} 
                component={CheckedInScreen}
                options={{drawerLockMode: 'locked-closed'}}
            />
            <Stack.Screen 
                name={"Business Details"} 
                component={BusinessDetailsScreen} 
                options={{drawerLockMode: 'locked-closed'}}
            />
        </Stack.Navigator>
    );
}