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>

但是我收到一条错误消息

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

那么如何向Drawer Navigator添加按钮？

Answer 1

关于5.x文档，您需要定义自定义组件，并使用抽屉内容 props 覆盖/传递它，在其中可以推送屏幕路线以及自定义路线项目。

以下是如何添加自定义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} />）行代码使您可以看到屏幕的剩下的就是您将在其中添加抽屉式容器自定义代码的区域。

如何在React导航抽屉中添加按钮

1 个答案: