React Navigation 5 - используйте навигацию по стеку, вкладкам и ящикам на всех экранах

Question

Я новичок, чтобы реагировать на родной язык, и у меня проблема с реактивной навигацией, в основном я хочу использовать нижнюю вкладку и меню ящика вместе на всех экранах, но, следуя некоторым примерам и руководствам, я не получаю то, что хочу. Я хочу, чтобы меню ящика и нижняя вкладка отображались на всех экранах.

Мой код:

const Tabs = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const FeedStack = createStackNavigator();
const AppStack = createStackNavigator();

const FeedStackScreen = () => (
  <FeedStack.Navigator screenOptions={{ headerShown: false }}>
    <FeedStack.Screen name='Feed' component={FeedScreen} />
    <FeedStack.Screen name='AddEvent' component={AddEventScreen} />
    <FeedStack.Screen name='Event' component={EventScreen} />
  </FeedStack.Navigator>
);

const TabsScreen = () => (
  <Tabs.Navigator
    screenOptions={{ headerShown: false }}
    tabBarOptions={{ showLabel: false }}
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color }) => {
        let iconName;

        if (route.name === 'Feed') {
          iconName = focused ? 'home' : 'home';
          color = focused ? '#1ba8cf' : '#666666';
        } else if (route.name === 'Notifications') {
          iconName = focused ? 'bell' : 'bell';
          color = focused ? '#1ba8cf' : '#666666';
        }
        return (
          <FontAwesomeIcon
            icon={iconName}
            size={20}
            color={color}
            style={{ textAlignVertical: 'center' }}
          />
        );
      }
    })}
  >
    <Tabs.Screen name='Feed' component={FeedStackScreen} />
    <Tabs.Screen name='Notifications' component={NotificationsScreen} />
  </Tabs.Navigator>
);

const EventsCalendarStackScreen = () => (
  <EventsCalendarStack.Navigator screenOptions={{ headerShown: false }}>
    <EventsCalendarStack.Screen
      name='EventsCalendar'
      component={EventsCalendarScreen}
    />
  </EventsCalendarStack.Navigator>
);

const DrawerNavigatior = () => (
  <Drawer.Navigator
    drawerPosition='right'
    screenOptions={{ headerShown: false }}
    initialRouteName='Feed'
    drawerContent={(props) => Sidebar(props)}
  >
    <Drawer.Screen
      name='EventsCalendar'
      component={EventsCalendarStackScreen}
      options={{ title: 'Calendário' }}
    />
    <Drawer.Screen
      name='Configurations'
      component={ConfigurationsScreen}
      options={{ title: 'Configurações' }}
    />
    <Drawer.Screen
      name='About'
      component={AboutScreen}
      options={{ title: 'Descobre quem somos' }}
    />
    <Drawer.Screen
      name='Team'
      component={TeamScreen}
      options={{ title: 'Conhece a Equipa' }}
    />
    <Drawer.Screen
      name='Contact'
      component={ContactScreen}
      options={{ title: 'Contacto' }}
    />
    <Drawer.Screen
      name='Terms'
      component={TermsScreen}
      options={{ title: 'Termos' }}
    />
    <Drawer.Screen
      name='Policy'
      component={PolicyScreen}
      options={{ title: 'Política de Privacidade' }}
    />
  </Drawer.Navigator>
);

return (
  <MenuProvider>
    <NavigationContainer>
      <AppStack.Navigator screenOptions={{ headerShown: false }}>
        <AppStack.Screen name='Drawer' component={DrawerNavigatior} />
      </AppStack.Navigator>
    </NavigationContainer>
  </MenuProvider>
);

Прежде всего, я не хочу, чтобы в меню ящика появлялись «Вкладки». И, во-вторых, я хочу, чтобы все экраны в ящике имели нижнюю вкладку.

Кто-нибудь может мне помочь? Спасибо