我试图在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,
});