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

好的，我知道React-Native有点麻烦。但是，我确实找到了解决问题的方法。

为解决该问题，我使用dangerouslyGetParent引用了父导航器，然后在其上设置了选项。

请记住，在配置屏幕时使用选项，而在导航器中配置所有屏幕时使用 screenOptions 。这些道具取代了反应导航4+中的navigationOptions和defaultNavigationOptions

这是完整的代码：

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

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

function MainDrawer() {
    return (
        <Drawer.Navigator >
            <Drawer.Screen name={"Search Locations Stack"} 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

Answer 2

更新：如果以下代码无效，请参考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>
    );
}

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

2 个答案: