[英]How to add a button inside a react navigation drawer
I need to add a logout button in a drawer with the React Navigation drawer tried doing this:我需要在带有 React Navigation 抽屉的抽屉中添加一个注销按钮,尝试这样做:
<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.关于 5.x 文档,您需要定义自定义组件并使用 drawerContent道具覆盖/传递它,您可以在其中推送屏幕路由和自定义路由项。
Here is code how to add custom ReactElement/Component:以下是如何添加自定义 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.这(
<DrawerItemList {...props} />
)行代码呈现您的屏幕,其余部分是您将添加抽屉容器的自定义代码的区域。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.