React Native 抽屉导航
(createDrawerNavigator)

17 Mar 2025 | 阅读 2 分钟

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

React Native 抽屉导航从 react-navigation 库导入 createDrawerNavigator。

它实现了 createDrawerNavigator() 来添加类（屏幕）列表。

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

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

如果您想切换您的抽屉，请调用以下方法

上述每种方法 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 Navigation，我们在其中讨论了 react-navigation 安装过程。

React Native 抽屉导航示例

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

现在，从 'react-navigation' 包中导入 createDrawerNavigator 并实现 createDrawerNavigator()。之后，在其上添加堆栈导航屏幕。

import React, { Component } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import {
    createSwitchNavigator,
    createAppContainer,
    createDrawerNavigator,
    createStackNavigator
} from 'react-navigation';
export default class App extends Component {
    render() {
        return <AppContainer />;
    }
}

class WelcomeScreen extends Component {
    static navigationOptions = {
         title: 'Welcome',
    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>WelcomeScreen</Text>
                <Button
                    title="Go to DashboardScreen"
                    onPress={() => this.props.navigation.navigate('Dashboard')}
                />
            </View>
        );
    }
}

class DashboardScreen extends Component {
    static navigationOptions = {
         title: 'Dashboard',
    };

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>DashboardScreen</Text>
            </View>
        );
    }
}
const DashboardStackNavigator = createStackNavigator(
    {
        DashboardNavigator: DashboardScreen
    },
    {
        defaultNavigationOptions: ({ navigation }) => {
        return {
            headerLeft: (
                <Icon
                    style={{ paddingLeft: 10 }}
                    onPress={() => navigation.openDrawer()}
                    name="md-menu"
                    size={30}
                />
            )
        };
        }
    }
);

const WelcomeStackNavigator = createStackNavigator(
    {
        WelcomeNavigator: WelcomeScreen
    },
    {
        defaultNavigationOptions: ({ navigation }) => {
            return {
                headerLeft: (
                    <Icon
                        style={{ paddingLeft: 10 }}
                        onPress={() => navigation.openDrawer()}
                        name="md-menu"
                        size={30}
                    />
                )
            };
        }
    }
);
const AppDrawerNavigator = createDrawerNavigator({
    Dashboard: {
        screen: DashboardStackNavigator
    },
    Welcome: {
        screen: WelcomeStackNavigator
    },
});

const AppSwitchNavigator = createSwitchNavigator({
    Dashboard: { screen: AppDrawerNavigator },
    Welcome: { screen: WelcomeScreen },

});

const AppContainer = createAppContainer(AppSwitchNavigator);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});

输出