如何在React Navigation抽屉中添加一个按钮

Question

我需要在 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>

但我收到一个错误提示：

导航器只能包含屏幕组件...

那么我该如何向抽屉式导航器中添加按钮？

- Harry

---

您可以使用自定义抽屉菜单。易于操作。 - Savinder Singh

尝试自定义抽屉。 - Mayank Pandav

Answer 1

关于5.x文档，您需要定义自定义组件并使用drawerContent props进行覆盖/传递，您可以在其中推送屏幕路由以及自定义路由项。

以下是如何添加自定义React元素/组件的代码：

<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} />)呈现了你屏幕的内容 其余部分是你添加抽屉容器的自定义代码的区域。

- Pankaj Badukale

---

很棒的答案。立即生效。当我搜索时，给出了相当复杂的示例。这正是我想要的。 - navraj

请确保从 react-navigation/drawer 导入这些组件：import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer' - Morris S

很棒的答案。这也是在抽屉导航器中实现线性渐变的正确方法。 - Uahnbu Tran