I need to add a logout button in a drawer with the React Navigation drawer tried doing this:
<Drawer.Navigator>
<Drawer.Screen name="Sales" children={CreateHomeStack} />
<Drawer.Screen name="Items" component={ItemsScreen} />
<Drawer.Screen name="Categories" component={CategoriesScreen} />
<Button>
<Text>LOGOUT</Text>
</Button>
</Drawer.Navigator>
But I get an error saying
A navigator can only contain screen components...
so how can I add buttons to a Drawer Navigator?
With respect to 5.x documentation you need to define custom component and override/pass it with drawerContent props where you can push your screen routes plus your custom route items.
Here is code how to add custom ReactElement/Component:
<Drawer.Navigator initialRouteName="Home" drawerContent={props => {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Logout" onPress={() => props.navigation.navigate("Login")} />
</DrawerContentScrollView>
)
}}>
<Drawer.Screen name="Home" component={Home}/>
<Drawer.Screen name="New Project" component={NewProject} />
</Drawer.Navigator>
Here you are overriding default drawer container with you component code
This( <DrawerItemList {...props} />
) line of code render you screen's And rest is your area where custom code for drawer container will added.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.