React-Native: Навигатор ящиков на всех вкладках (Reaction-Navigation v5)

Question

Я хочу иметь приложение с BottomTabNavigation. Также я хочу, чтобы DrawerNavigation была доступна из all Tabs.

My AppNavigator.js содержит следующее. Я могу только «получить доступ» к TabNavigator. Ящик недоступен.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer, StackActions, StackNavigator } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer'; 

const Tabs = createBottomTabNavigator();
const TabsScreen = () => (
  <Tabs.Navigator>
    <Tabs.Screen name="Page1" component={Page1} />
    <Tabs.Screen name="Page2" component={Page2} />
    <Tabs.Screen name="Page3" component={Page3} />
    <Tabs.Screen name="Page4" component={Page4} />
  </Tabs.Navigator>
)

const Drawer = createDrawerNavigator();
const DrawerScreen = () => (
  <Drawer.Navigator>
    <Drawer.Screen name="Drawer-Item1" component={Drawer-Item1} />
    <Drawer.Screen name="Drawer-Item2" component={Drawer-Item2} />
  </Drawer.Navigator>
)

const Stack = createStackNavigator();
export default () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Tabs" component={TabsScreen} />
      <Stack.Screen name="Drawer" component={DrawerScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

Если поместить DrawerScreen в первый элемент TabsScreen, DrawerNavigation доступен только на первой вкладке, но не на всех других вкладках. Наоборот то же самое. Если я добавлю TabsScreen в первый элемент DrawerScreen, вкладки будут доступны только в первом элементе DrawerScreen.

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

Есть идеи? : -)

Answer 1

Вам необходимо определить TabNavigator как дочерний экран DrawerNavigator. Таким образом, ящик будет доступен отовсюду.

const Tabs = createBottomTabNavigator();
const TabsScreen = () => (
  <Tabs.Navigator>
    <Tabs.Screen name="Page1" component={Page1} />
    <Tabs.Screen name="Page2" component={Page2} />
    <Tabs.Screen name="Page3" component={Page3} />
    <Tabs.Screen name="Page4" component={Page4} />
  </Tabs.Navigator>
)

const Drawer = createDrawerNavigator();
const DrawerScreen = () => (
  <Drawer.Navigator>
    <Drawer.Screen name="Tabs" component={TabsScreen} />
    <Drawer.Screen name="Drawer-Item1" component={Drawer-Item1} />
    <Drawer.Screen name="Drawer-Item2" component={Drawer-Item2} />
  </Drawer.Navigator>
)

const Stack = createStackNavigator();
export default () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Drawer" component={DrawerScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)