关注我们

React Native - 抽屉导航

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()方法打开抽屉。

现在，从“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 ;
    }
}

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 (
            DashboardScreen
        );
    }
}
const DashboardStackNavigator = createStackNavigator(
    {
        DashboardNavigator: DashboardScreen
    },
    {
        defaultNavigationOptions: ({ navigation }) => {
        return {
            headerLeft: (
                 navigation.openDrawer()}
                    name="md-menu"
                    size={30}
                />
            )
        };
        }
    }
);

const WelcomeStackNavigator = createStackNavigator(
    {
        WelcomeNavigator: WelcomeScreen
    },
    {
        defaultNavigationOptions: ({ navigation }) => {
            return {
                headerLeft: (
                     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'
    }
});