javascript 如何禁用抽屉导航滑动的导航器屏幕之一只?

r7xajy2e  于 2023-03-28  发布在  Java
关注(0)|答案(6)|浏览(145)

我有一个自定义的导航抽屉,在一个特定的屏幕上,我不希望它可用。
这是我的短代码。
这个导航器也被switch navigator包含。我在git-hub和其他论坛上挖掘,目前没有任何工作。我错过了什么吗?有人让它工作吗?

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

export default createAppContainer(UserNavigation)

还有一个working code on 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)
xmq68pz9

xmq68pz91#

您可以使用“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>);}
gzjq41n4

gzjq41n42#

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

uhry853o

uhry853o3#

问题是我使用Ignite生成我的项目模板,而React导航版本在3.0.0时被修复。在看了this link的最后一条评论后,我意识到这不是我的语法问题。
所以我删除了我的packed.lock.json,yarn.lock,node_modules文件夹,在package.json中我将版本设置为^3.0.0以获得最新版本。
在这一切之后,我做了一个yarn安装,以获得完整的软件包更新。通过这个更改,我的react-navigation-drawer从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,
    }
  )
)
57hvy0tb

57hvy0tb4#

如需在React Navigation V5中禁用单个路径中的滑动/手势:
导入助手以获取当前路线名称
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
检查路线名称是否与要禁用滑动/手势的路线相同

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

wooyq4lh5#

我已经添加了导航设置代码禁用侧菜单的特定屏幕,这可能对某人有帮助.

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 />
        </>
    );
  }
}
jm81lzqq

jm81lzqq6#

swipeEnabled属性可以提供帮助,但抽屉仍可能因其他原因而被触发(例如,一个操作可以通过编程打开它)。
如果你想确保抽屉在某些情况下根本不显示,并且你能够全局检测到这种情况,你可以在screenOptions中使用drawerStyle: { display: 'none' }

const screenOptions = {
    drawerStyle: {
        display: 'none',
    },
    // ...
};

<Drawer.Navigator
    drawerContent={({ navigation }) => (
        <DrawerContent navigation={navigation} />
    )}
    screenOptions={screenOptions}
>
    {'...'}
</Drawer.Navigator>

在我的例子中,如果用户没有经过身份验证,我不想显示抽屉,所以我定义了显示:“没有”在这种情况下。

相关问题