无涯教程-React Native - 抽屉导航

最新推荐文章于 2024-08-27 09:31:07 发布

Hi无涯教程

最新推荐文章于 2024-08-27 09:31:07 发布

阅读量666

点赞数 24

CC 4.0 BY-SA版权

分类专栏：无涯教程文章标签： react-native

本文链接：https://blog.csdn.net/w116858389/article/details/140495871

React Native Drawer Navigation是一个UI面板，显示应用程序的导航菜单。默认情况下，它在不使用时是隐藏的，但是当用户从屏幕边缘滑动手指或触摸应用栏上添加的抽屉图标顶部时，它就会显示。

React Native Drawer Navigation从react-navigation库导入createDrawerNavigator。

import {
    
     createDrawerNavigator } from react-navigation

它实现了createDrawerNavigator()来添加类列表。

createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

要打开和关闭抽屉，请使用以下帮助方法:

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();

如果要将抽屉切换，然后调用以下方法:

this.props.navigation.toggleDrawer();

上面的每个方法openDrawer()，closeDrawer()和toggleDrawer()都简单地将动作调度为:

this.props.navigation.dispatch(DrawerActions.openDrawer());
this.props.navigation.dispatch(DrawerActions.closeDrawer());
this.props.navigation.dispatch(DrawerActions.toggleDrawer());

在创建React Native抽屉式导航之前，首先要经过React Native导航，在这里我们讨论了react-navigation的安装过程。

抽屉导航示例

在react native应用程序中创建两个单独的类"DashboardScreen"和"WelcomeScreen"以显示在屏幕上。将这些屏幕添加到createStackNavigator并添加"react-native-vector-icons/Ionicons"包的"md-menu"图标。按下菜单图标后，调用navigation.openDrawer()方法打开抽