[英]How to add a button inside a react navigation drawer
我需要在带有 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>
但我收到一个错误说
导航器只能包含屏幕组件...
那么如何将按钮添加到抽屉导航器?
关于 5.x 文档,您需要定义自定义组件并使用 drawerContent道具覆盖/传递它,您可以在其中推送屏幕路由和自定义路由项。
以下是如何添加自定义 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>
在这里,您使用组件代码覆盖默认抽屉容器
这( <DrawerItemList {...props} />
)行代码呈现您的屏幕,其余部分是您将添加抽屉容器的自定义代码的区域。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.