Question

我有如下实现抽屉导航器，我有如下堆栈导航器，

function MyStack() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home" drawerStyle={{ width: (window.width) * 0.75 }} 
      drawerContent={(props) => <DrawerContent {...props} />}>
        <Drawer.Screen name="Home" children={createHomeStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

我的堆栈导航器如下，

createHomeStack = () =>
  <Stack.Navigator screenOptions={{ headerShown: false }}>
    <Stack.Screen
      name="LandingPage" component={LandingPage}
    />
    <Stack.Screen
      name="LoginPage" component={LoginPage}
    />
    <Stack.Screen
      name="SignUpPage" component={SignUpPage}
    />
    <Stack.Screen
      name="DashboardPage" component={DashBoardPage}
    />
    <Stack.Screen
     name="OffersPage" component={OffersPage}
    />
    <Stack.Screen
     name="ProfilePage" component={ProfilePage}
    />
  </Stack.Navigator>

我想禁用 LandingPage、LoginPage、SignUpPage 的抽屉，并仅启用其余屏幕的抽屉。谁能帮我存档这个目标？

Answer 1

您可以通过检查路线页面将 swipeEnabled=false 添加到 Drawer.Screen

<Drawer.Screen
  options={({ route, navigation }) => {
    return {
      swipeEnabled: false,
    };
  }}/>

禁用特定屏幕的抽屉

1 个答案: