如何禁用嵌套在抽屉导航器中的抽屉导航器？ [英] How to disable drawer inside Stack Navigator nested inside Drawer Navigator?

问题描述

我在抽屉导航器中有一个嵌套的堆栈导航器，我不希望用户在不在堆栈导航器的第一页时能够从左侧滑动并打开抽屉。我找到了一些答案，但它们似乎使用了官方文档中没有使用的一些旧语法。

// stack navigator
const Items = () => {
    const IStack = createStackNavigator()
    return (
        <IStack.Navigator initialRouteName="Items" screenOptions={{ headerShown: false }} >
            <IStack.Screen  name="Items" component={ItemSelect} options={{ ...TransitionPresets.SlideFromRightIOS }} />
            <IStack.Screen name="Item" component={ItemScreen} options={{ ...TransitionPresets.SlideFromRightIOS }} />
        </IStack.Navigator>
    )
}
// drawer
const App = () => {
  return (
    <NavigationContainer theme={MyTheme}>
        <StatusBar barStyle="light-content" backgroundColor="#232931" />
        <Drawer.Navigator initialRouteName="Items">
            <Drawer.Screen name="Items" component={Items} />
        </Drawer.Navigator>
    </NavigationContainer>
  )
}

我要禁用堆栈导航器第二个屏幕上的抽屉，即ItemScreen。

推荐答案

我最终做的是-

<Drawer.Screen 
    name="Items" 
    component={Items} 
    options={({ route }) => {
                const routeName = getFocusedRouteNameFromRoute(route) ?? 'Items'
                if (routeName == "Item")
                    return ({swipeEnabled: false})
            }} 
/>

More关于getFocusedRouteNameFromRoute。 对于如此简单的场景，在任何地方都看不到答案，这很奇怪。

这篇关于如何禁用嵌套在抽屉导航器中的抽屉导航器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！