时间戳

首页 > 解决方案 > 将手势/滑动设置为 false 不起作用 [react-navigation v5]

reactjs - 将手势/滑动设置为 false 不起作用 [react-navigation v5]

问题描述

在我的 react-native 应用程序中，我希望在某些屏幕上禁用抽屉。所有屏幕都是堆栈并传递给drawerNavigation. 使用或to指定navigationOptions这两个屏幕，仍然通过滑动抽屉打开gestureEnabledswipeEnabledfalse

const StackScreens = ({navigation}) => (
  <Stack.Navigator
    initialRouteName="SplashScreenCtrl"
    headerMode="screen"
    screenOptions={{}}
    mode="card">
    <Stack.Screen name="Splash" component={SplashScreenCtrl} options={{gestureEnabled: false}}/> // or swipeEnabled:false
    <Stack.Screen name="Login" component={LoginScreen} options={{gestureEnabled: false}}/>
  {/* and 10 more screens*/}
  </Stack.Navigator>
);

// and in the render method
return (
    <StatusBar backgroundColor="black" barStyle="light-content" />
    <NavigationContainer>
      <Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />} >
        <Drawer.Screen name="DrawerScreen" component={StackScreens} />
      </Drawer.Navigator>
    </NavigationContainer>
);

在屏幕上定义导航选项也不起作用

// in LoginScreen.js
static navigationOptions = ({navigation}) => ({
    headerShown: false,
    swipeEnabled: false,
  });
// Then at creating stack navigator
<Stack.Screen name="Login" component={LoginScreen} options={LoginScreen.navigationOptions}/>

标签： reactjsreact-nativereact-navigationreact-navigation-stackreact-navigation-drawer

解决方案

它迟到了，但它可能会帮助一些人

您应该在 Drawer 声明中放置gestureEnabled: false

   <Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />} >
        <Drawer.Screen name="DrawerScreen" component={StackScreens} 
           options={{ gestureEnabled: false }}/>

推荐阅读