如何在反应导航抽屉内添加按钮

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>

但我收到一个错误说

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

那么如何将按钮添加到抽屉导航器？

Answer 1

关于 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} />）行代码呈现您的屏幕，其余部分是您将添加抽屉容器的自定义代码的区域。