我在抽屉导航器中有一个嵌套的堆栈导航器,我不希望用户在不在堆栈导航器的第一页时能够从左侧滑动并打开抽屉。我找到了一些答案,但它们似乎使用了一些官方文档中未使用的旧语法。
// 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
。
答案 0 :(得分:2)
这是我最终做的 -
<Drawer.Screen
name="Items"
component={Items}
options={({ route }) => {
const routeName = getFocusedRouteNameFromRoute(route) ?? 'Items'
if (routeName == "Item")
return ({swipeEnabled: false})
}}
/>
More 关于 getFocusedRouteNameFromRoute
。
对于这样一个简单的场景,在任何地方都找不到答案,这很奇怪。