在本机反应中禁用侧面菜单抽屉

Question

我使用 react-native 创建了一个带有侧边菜单的页面，并使用 react-navigation 进行路由。我想禁用通过左侧滑动手势显示的侧边菜单屏幕。

  export const StackNav = StackNavigator(
    {
      Login: {
        screen: Login,
        navigationOptions: {
          headerMode: "none",
          header: null
        }
      },
      Signup: {
        screen: Signup,
        navigationOptions: {
          headerMode: "none",
          header: null
        }
      },
    },
    {
      initialRouteName: "Login"
    }
  );

  //for admin login, run campaign
  const TabNav1 = TabNavigator(
    {
      SelectCarriers: {
        screen: SelectCarriers,
        navigationOptions: {
          tabBarLabel: "Select Carriers"
        }
      },
      ErrorRecords: {
        screen: ErrorRecords,
        navigationOptions: {
          tabBarLabel: "Error Records"
        }
      }
    },
    {
      tabBarPosition: "top",
      tabBarOptions: {
        labelStyle: {
          fontWeight: "bold"
        }
      }
    }
  );
  //for Notification page or carrier login
  const TabNav = TabNavigator(
    {
      Notification: {
        screen: Notification,
        navigationOptions: {
          tabBarLabel: "Notification"
        }
      },
      NotificationHistory: {
        screen: NotificationHistory,
        navigationOptions: {
          tabBarLabel: "Notification History"
        }
      }
    },
    {
      tabBarPosition: "bottom"
    }
  );
  const TabNavStack = StackNavigator({
    Main: {
      screen: TabNav,
      navigationOptions: ({ navigation }) => ({
        headerTitle: "Notification"
      })
    }
  });

  const sidemenuNav = StackNavigator({
    Dashboard: {
      screen: Dashboard,
      navigationOptions: ({ navigation }) => ({
        headerLeft: (
          <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
            <Text style={{ paddingLeft: 15 }}>
              <Icon name="navicon" style={{ fontSize: 25 }} />
            </Text>
          </TouchableOpacity>
        )
      })
    },
    ViewRanking: {
      screen: ViewRanking,
      navigationOptions: ({ navigation }) => ({
        title: "View Ranking"
      })
    },
    SelectCarriers: {
      screen: SelectCarriers,
      navigationOptions: ({ navigation }) => ({
        headerTitle: "SELECT CARRIER"
      })
    },
    RunCampaign : {
      screen: RunCampaign,
      navigationOptions: ({navigation}) =>({
        title: "RUN"
      })
    },
    SelectedCampaign : {
      screen: SelectedCampaign,
      navigationOptions: ({navigation}) => ({
        title: "SELECTED CAMPAIGN",
      })
    },
    ChangePassword: {
      screen: ChangePassword,
      navigationOptions: {
        title: 'Change Password'
      }
    },
    EmailAnalytics: {
      screen: EmailAnalytics,
      navigationOptions: {
        title: 'Email Analytics'
      }
    },
    ViewCampaignHistory: {
      screen: ViewCampaignHistory,
      navigationOptions: {
        title: 'View Campaign History'
      }
    },
    CheckResponse: {
      screen: CheckResponse,
      navigationOptions: {
        title: 'CHECK RESPONSE'
      }
    },
    CampaignResult: {
      screen: CampaignResult,
      navigationOptions: {
        title: 'CAMPAIGN RESULT'
      }
    },
  });

  const DrawerNav = DrawerNavigator(
    {
      Item1: {
        screen: sidemenuNav
      }
    },
    {
      contentComponent: SideMenu,
      drawerWidth: Dimensions.get("window").width - 120
    }
  );

  export const PrimaryNav = StackNavigator(
    {
      StackNav: { screen: StackNav },
      TabNavStack: { screen: TabNavStack },
      DrawerNav: { screen: DrawerNav }
    },
    {
      // Default config for all screens
      headerMode: "none",
      initialRouteName: "StackNav"
    }
  );

所以，在 sidemenuNav 中，我想禁用 ViewRanking、SelectCarriers 的侧抽屉......

我尝试了drawerLockMode 的导航选项，但没有成功。

我提到了一些问题，但没有用。

建议答案后将其标记为重复或否决

Answer 1

drawerLockMode 是您正在寻找的选项。 Doc（无抽屉锁定模式）

指定抽屉的锁定模式。这也可以通过在顶级路由器上使用 screenProps.drawerLockMode 动态更新。

并且有三种类型的选项。 Doc

• 解锁（默认），这意味着抽屉将响应（打开/关闭）触摸手势。
• locked-closed，表示抽屉将保持关闭状态，不响应手势。
• locked-open，这意味着抽屉将保持打开状态并且不响应手势。抽屉仍然可以通过编程方式打开和关闭（openDrawer/closeDrawer）。

因此，在 sidemenuNav 的 navigationOptions 中添加条件语句。 Doc

sidemenuNav.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) { // control by depth
    drawerLockMode = 'locked-closed';
  }

  return {
    drawerLockMode,
  };
};

这是我测试过的代码。

const AuthStackNavigation = createStackNavigator({
  HomeStack: HomeScreen,
  LoginStack: HomeScreen,
  RegisterStack: HomeScreen,
}, {
  initialRouteName: 'HomeStack',
  navigationOptions: {
    gesturesEnabled: false,
  },
})

AuthStackNavigation.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.key > 0) {
    drawerLockMode = 'locked-closed';
  }

  return {
    drawerLockMode,
  };
};

const DashboardStack = createStackNavigator({
  Dashboard: {
    screen: Dashboard,
  }
})

const DrawerNav = createDrawerNavigator({
  AuthStackNavigation: {
    screen: AuthStackNavigation,
    // navigationOptions: {
    //   gesturesEnabled: false,
    //   drawerLockMode: 'locked-close'
    // }
  },
  DashboardStack: {
    screen: DashboardStack,
  },
  ThirdScreen: Dashboard,
})

...

const MainNavigation = createSwitchNavigator({
  HomeDrawer: DrawerNav,
	Tab: TabNavigationComponent,
  AuthStack: AuthStackNavigation, // You will use this.props.navigation.replace('HomeDrawer') after login process.
})

export default MainNavigation // Stack, Drawer, Switch naviagtions return react component.

添加

我与您的屏幕架构师进行了全面测试，并确认它运行良好。

/**
 * Disable the side menu drawer in react native
 * Test code: https://stackoverflow.com/questions/52968354/disable-the-side-menu-drawer-in-react-native/52970168?noredirect=1#comment92875031_52970168
 *
 */

import {
  createStackNavigator,
	createDrawerNavigator,
	createBottomTabNavigator,
} from 'react-navigation';

import { Platform, TouchableOpacity, Text } from 'react-native';
import React from 'react';


import HomeScreen from './Home';
import Dashboard from './Dashboard';
import CheckBoxScreen from './CheckBoxTest';

import TabBar from './TabBar';
// import createBottomTabNavigator from 'react-navigation-tabs/dist/utils/createBottomTabNavigator';

export const StackNav = createStackNavigator(
	{
		Login: {
			screen: HomeScreen,
			navigationOptions: {
				headerMode: "none",
				header: null
			}
		},
		Signup: {
			screen: HomeScreen,
			navigationOptions: {
				headerMode: "none",
				header: null
			}
		},
	},
	{
		initialRouteName: "Login"
	}
);

//for admin login, run campaign
const TabNav1 = createBottomTabNavigator(
	{
		SelectCarriers: {
			screen: HomeScreen,
			navigationOptions: {
				tabBarLabel: "Select Carriers"
			}
		},
		ErrorRecords: {
			screen: HomeScreen,
			navigationOptions: {
				tabBarLabel: "Error Records"
			}
		}
	},
	{
		tabBarPosition: "top",
		tabBarOptions: {
			labelStyle: {
				fontWeight: "bold"
			}
		}
	}
);
//for Notification page or carrier login
const TabNav = createBottomTabNavigator(
	{
		Notification: {
			screen: Dashboard,
			navigationOptions: {
				tabBarLabel: "Notification"
			}
		},
		NotificationHistory: {
			screen: Dashboard,
			navigationOptions: {
				tabBarLabel: "Notification History"
			}
		}
	},
	{
		tabBarPosition: "bottom"
	}
);
const TabNavStack = createStackNavigator({
	Main: {
		screen: TabNav,
		navigationOptions: ({ navigation }) => ({
			headerTitle: "Notification"
		})
	}
});

const sidemenuNav = createStackNavigator({
	Dashboard: {
		screen: HomeScreen,
		navigationOptions: ({ navigation }) => ({
			headerLeft: (
				<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
					<Text style={{ paddingLeft: 15 }}>
						{/* <Icon name="navicon" style={{ fontSize: 25 }} /> */}
						icon
					</Text>
				</TouchableOpacity>
			)
		})
	},
	LoginStack: {
		screen: Dashboard,
		navigationOptions: ({ navigation }) => ({
			title: "View Ranking"
		})
	},
	SelectCarriers: {
		screen: Dashboard,
		navigationOptions: ({ navigation }) => ({
			headerTitle: "SELECT CARRIER"
		})
	},
	RunCampaign : {
		screen: Dashboard,
		navigationOptions: ({navigation}) =>({
			title: "RUN"
		})
	},
	SelectedCampaign : {
		screen: Dashboard,
		navigationOptions: ({navigation}) => ({
			title: "SELECTED CAMPAIGN",
		})
	},
	ChangePassword: {
		screen: Dashboard,
		navigationOptions: {
			title: 'Change Password'
		}
	},
	EmailAnalytics: {
		screen: Dashboard,
		navigationOptions: {
			title: 'Email Analytics'
		}
	},
	ViewCampaignHistory: {
		screen: Dashboard,
		navigationOptions: {
			title: 'View Campaign History'
		}
	},
	CheckResponse: {
		screen: Dashboard,
		navigationOptions: {
			title: 'CHECK RESPONSE'
		}
	},
	CampaignResult: {
		screen: Dashboard,
		navigationOptions: {
			title: 'CAMPAIGN RESULT'
		}
	},
}, {
	navigationOptions: {
    gesturesEnabled: false,
    // drawerLockMode: 'locked-closed' // not work
  },
});

sidemenuNav.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) { // control by depth
    drawerLockMode = 'locked-closed';
  }

  return {
    drawerLockMode,
  };
};


const DrawerNav = createDrawerNavigator(
	{
		Item1: {
			screen: sidemenuNav
		}
	},
	{
		// contentComponent: SideMenu,
		// drawerWidth: Dimensions.get("window").width - 120
	}
);

export const PrimaryNav = createStackNavigator(
	{
		StackNav: { screen: StackNav },
		TabNavStack: { screen: TabNavStack },
		DrawerNav: { screen: DrawerNav }
	},
	{
		// Default config for all screens
		headerMode: "none",
		initialRouteName: "DrawerNav"
	}
);

export default PrimaryNav // Stack, Drawer, Switch naviagtions return react component.

我不确定您的代码有什么问题，但使用最近的 react-navigation 和推荐方法为 createSomeNavigator 而不是弃用为 DrawerNavigator、StackNavigator 等。 祝你好运。