首页 文章

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

提问于
浏览 次
1

我使用react-native创建了一个带有sidemenu的页面，并使用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 等等 . 祝好运 .

    回复于

相关问题