反应本地DrawerNavigator

时间:2018-07-19 06:33:47

标签: react-native

我试图在react native中实现抽屉导航器。 但是,当我单击菜单图标时,菜单没有显示在屏幕的左侧。 我认为主要问题是DrawerIcon中的onPress()并调用RootStackA。但我无法弄清楚。

import React from 'react';
import { createDrawerNavigator, createStackNavigator, createBottomTabNavigator} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

import Home from '../Home';
import Login from './Login';
import Memberarea from './Memberarea';
import Signup from './Signup';

const DrawerIcon = ({navigate}) => {

    return (
        <Icon
            name="md-menu"
            size={28}
            color="black"
            style={{ paddingLeft: 20 }}
            onPress={() => navigate('DrawerOpen')}
        />
    );
};

//堆栈/////////////////////////////////////////

 export const RootStackA = createStackNavigator({
            Home: {
                screen: Home,
                navigationOptions: ({ navigation }) => ({
                    headerLeft: <DrawerIcon {...navigation} />,
                }),
            },
        },
    );

//抽屉/////////////////////////////////////////

export const Drawer = createDrawerNavigator({
    Screen1: {
        screen: RootStackA,
        navigationOptions: {
            drawerLabel: 'Home',
            drawerIcon: ({ tintColor }) => (
                <Icon name='ios-albums-outline' size={32} color={tintColor} />
            ),
        },
    },
},
{
    drawerPosition: 'left',
    initialRouteName: 'Screen1',
    drawerBackgroundColor: 'orange',
    drawerWidth: 200,
});

0 个答案:

没有答案