如何仅在一个导航器屏幕上禁用抽屉导航滑动

我有一个自定义导航抽屉，在特定屏幕上，我不希望它可用。

这是我的简短代码。

交换机导航器也包括此导航器。我已经在Git-ub和其他论坛上进行了挖掘，目前没有任何工作。我想念什么吗？有一个让它工作的人吗？

const UserNavigation = createDrawerNavigator({
    ProductListScreen: {screen: ProductListScreen},
    ProductHistoryScreen: {
      screen: ProductHistoryScreen,
      navigationOptions: {
        drawerLockMode: 'locked-closed'
      }
    }
}, {
    initialRouteName: 'ProductListScreen',
    contentComponent: CustomDrawerContentComponent,
})
export default createAppContainer(UserNavigation)

还有一个关于Expo的工作代码，但我尝试并结果显示了双导航器显示，并且在屏幕上也不想显示其出现的抽屉。这是我参考世博代码

的尝试

const UserStackNavigation = createStackNavigator({
  ProductListScreen: {screen: ProductListScreen},
  ProductHistoryScreen: {
    screen: ProductHistoryScreen
  }
})
const UserNavigation = createDrawerNavigator({
  UserStackNavigation: UserStackNavigation
}, {
  initialRouteName: 'UserStackNavigation',
  contentComponent: CustomDrawerContentComponent,
})
UserStackNavigation.navigationOptions = ({ navigation }) => ({
  drawerLockMode: navigation.state.index === 0 ? 'unlocked' : 'locked-closed',
});
export default createAppContainer(UserNavigation)

您可以使用" SwipeEnabled"设置每个屏幕设置选项。财产。请查看有关文档的相关页面;

https://reactnavigation.org/docs/drawer-navigator/#options

<Drawer.Navigator initialRouteName="Feed">
  <Drawer.Screen
    name="Feed"
    component={Feed}
    options={{ swipeEnabled: false }}
  />
  <Drawer.Screen
    name="Profile"
    component={Profile}
    options={{ drawerLabel: 'Profile' }}
  />
</Drawer.Navigator>);}

在V5中您可以使用 <Drawer.Navigator screenOptions={{ gestureEnabled: false }} ...>...</Drawer.Navigator>

我添加了用于禁用特定屏幕的侧面菜单的导航设置代码，这可能对某人有帮助。

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
import LoginScreen from '../LoginScreen'
import PasswordScreen from '../PasswordScreen'
import HomeScreen from '../HomeScreen'

const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()
const sideMenuDisabledScreens = ['Login', 'Password']
const DrawerNavigator = () => {
  return (
    <Drawer.Navigator 
      screenOptions={{headerShown: false}} 
      drawerPosition="right"
      drawerContent={(props) => <SideMenu {...props} />}
    >
    <Drawer.Screen 
      name="Initial"
      component={StackNavigator}
      options={({ route }) => {
        const routeName = getFocusedRouteNameFromRoute(route) ?? 'Login'
        if (sideMenuDisabledScreens.includes(routeName))
            return ({swipeEnabled: false})
      }} 
    />
    </Drawer.Navigator>
  );
}
const StackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      <Stack.Screen name='Login' component={LoginScreen}/>
      <Stack.Screen name='Password' component={PasswordScreen} options={{gestureEnabled: false}}/>
      <Stack.Screen name='Home' component={HomeScreen} />
    </Stack.Navigator>
  );
}
function MainNavigator() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}
export default MainNavigator

app.js具有以下代码

import React, { Component } from 'react';
import MainStackNavigator from './src/navigation/MainStackNavigator';
export default class App extends Component {
  render() {
    return (
      <>
        <MainStackNavigator />
        </>
    );
  }
}

问题是我正在使用IGNITE生成项目模板，并且React-Navigation版本固定为3.0.0。在此链接上观看了最后一条评论后，我意识到我的语法并不是什么问题。

因此，我删除了我的包装。lock.json，yarn.lock，node_modules folder，in package.json i将版本设置为 ^3.0.0，以获取最新版本。

之后，我进行了纱线安装以获取完整的软件包更新。随着此更改，我的反应抽屉抽屉从1.0.1升至1.3.0，这解决了问题。

还对我的导航进行了一些更改，现在看起来像这样：

export default class UserNavigation extends React.Component{
  render(){
    return <Nav />
  }
}
const Nav = createAppContainer(
  createDrawerNavigator(
    {
      ProductListScreen: {screen: ProductListScreen},
      ProductHistoryScreen: {
        screen: ProductHistoryScreen,
          navigationOptions:{
            drawerLockMode: 'locked-closed'
          }
      }
    }, {
      initialRouteName: 'ProductListScreen',
      contentComponent: CustomDrawerContentComponent,
    }
  )
)

在React Navigation V5中的单个路线中禁用滑动/手势：

进口助手以获取当前路由名称

import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

检查路由名称是否与要禁用滑动/手势的路由相同

options={({ route }) => {
   const routeName = getFocusedRouteNameFromRoute(route);
   return {
     swipeEnabled: routeName !== 'Profile',
   };
}}

swipeEnabled属性可以提供帮助，但是由于其他原因，抽屉仍然可以触发（例如，操作可以从编程中打开）。

如果要确保在某些情况下根本不显示抽屉，并且可以在全球检测情况，则可以在screenOptions中使用drawerStyle: { display: 'none' }：

const screenOptions = {
    drawerStyle: {
        display: 'none',
    },
    // ...
};
<Drawer.Navigator
    drawerContent={({ navigation }) => (
        <DrawerContent navigation={navigation} />
    )}
    screenOptions={screenOptions}
>
    {'...'}
</Drawer.Navigator>

在我的情况下，我不想在用户未经身份验证的情况下显示抽屉，因此我定义显示：'无'在这种情况下。

相关内容

最新更新

热门标签：