Как добавить кнопку в ящик с реагирующей навигацией

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>

Но я получаю сообщение об ошибке: 1004 *

Навигатор может только содержат компоненты экрана ...

так как я могу добавить кнопки в Навигатор ящиков?

Answer 1

Что касается документации 5.x, вам нужно определить пользовательский компонент и переопределить / передать его с параметром boxContent props , где вы можете выбрать sh ваши экранные маршруты и элементы пользовательского маршрута.

Вот код, как добавить пользовательский 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} />) строка кода отображает вас Экран и отдых - это ваша область, где будет добавлен пользовательский код для контейнера ящика.