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

问题描述 投票：1回答：1

我使用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导航选项，但没有工作。

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

在建议答案后将其标记为重复或投票结果

react-native react-navigation
1个回答
2
投票

drawerLockMode是你找到的选择。 Doc（No drawerLockedMode）

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

并且有三种类型选项。 Doc

  • 解锁（默认），意味着抽屉将响应（打开/关闭）触摸手势。
  • 锁定关闭，意味着抽屉将保持关闭而不响应手势。
  • 锁定打开，意味着抽屉将保持打开状态而不响应手势。抽屉仍然可以通过编程方式打开和关闭（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.

我不确定你的代码有什么问题但是使用最近的反应导航和推荐的方法作为createSomeNavigator而不是弃用为DrawerNavigator，StackNavigator等。祝好运。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.