Несколько ящиков в реакции-навигации 5.0

Question

Я написал код ниже для создания нескольких боковых меню, но произошла ошибка

Другой навигатор уже зарегистрирован для этого контейнера. Вероятно, у вас есть несколько навигаторов под одним «NavigationContainer» или «Экран». Убедитесь, что каждый навигатор находится в отдельном контейнере «Экран».

Однако я пытался найти Контейнер для нескольких ящиков, но безуспешно.

Что мне делать?

Заранее спасибо.

import React from 'react';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationNativeContainer } from '@react-navigation/native';
import { Container, Text, Button } from 'native-base';
import 'react-native-gesture-handler'

function BlankScreen({ navigation }) {
  return (
    <Text>Blank</Text>
);
}

function HomeScreen({ navigation }) {
  return (
    <Container style={{ flex: 1, flexDirection: 'column-reverse' }}>
      <Button onPress={() => navigation.navigate('Menu')}>
        <Text>Go to Menu</Text>
      </Button>
      <Button onPress={() => navigation.navigate('Favorit')}>
        <Text>Go to Favorit</Text>
      </Button>
    </Container>
);
}

function MenuScreen({ navigation }) {
  return (
    <Container style={{ flex: 1, flexDirection: 'column-reverse' }}>
      <Button onPress={() => navigation.goBack()}>
        <Text>Go back home</Text>
      </Button>
    </Container>
);
}

function FavoritScreen({ navigation }) {
  return (
    <Container style={{ flex: 1, flexDirection: 'column-inverse' }}>
      <Button onPress={() => navigation.goBack()}>
        <Text>Go back home</Text>
      </Button>
  </Container>
);
}

const DrawerL = createDrawerNavigator();
const DrawerR = createDrawerNavigator();

export default function App() {
  return (
    <Container>
      <NavigationNativeContainer>
        <DrawerL.Navigator initialRouteName="Home" drawerPosition="left">
          <DrawerL.Screen name="Home" component={HomeScreen} />
          <DrawerL.Screen name="Menu" component={MenuScreen} />
          <DrawerL.Screen name="Favorit" component={FavoritScreen} />
        </DrawerL.Navigator>
        <DrawerR.Navigator initialRouteName="Blank" drawerPosition="right">
          <DrawerR.Screen name="Blank" component={BlankScreen} />
          <DrawerR.Screen name="Menu" component={MenuScreen} />
          <DrawerR.Screen name="Favorit" component={FavoritScreen} />
        </DrawerR.Navigator>
      </NavigationNativeContainer>
    </Container>
);

Answer 1

То, как вы написали, не сработает, потому что учтите следующее: у вас 2 ящика, один из которых имеет начальный маршрут как «Домой», а другой как «Пустой». Какой из них должен быть отрендерен?

Здесь вам нужно следовать тому же подходу, что и в React Navigation 4, поместить один ящик в другой:

function HomeStack() {
  return (
    <Stack.Navigator screenOptions={{ animationEnabled: false }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Menu" component={MenuScreen} />
      <Stack.Screen name="Favorit" component={FavoritScreen} />
    </Stack.Navigator>
  )
}

function RightDrawer() {
  return (
    <DrawerR.Navigator initialRouteName="Home" drawerPosition="right">
      <DrawerR.Screen name="Home" component={HomeStack} />
      <DrawerR.Screen name="Menu" component={MenuScreen} />
      <DrawerR.Screen name="Favorit" component={FavoritScreen} />
    </DrawerR.Navigator>
  )
}

function LeftDrawer() {
  return (
    <DrawerL.Navigator initialRouteName="RightDrawer" drawerPosition="left">
      <DrawerL.Screen name="RightDrawer" component={RightDrawer} />
    </DrawerL.Navigator>
  );
}

function App() {
  return (
    <NavigationNativeContainer>
      <LeftDrawer />
    </NavigationNativeContainer>
  )
}

Поскольку ваш левый ящик не будет отображать экраны, которые у вас есть в стеке, вам потребуется предоставить пользовательский компонент для вашего ящика, в котором перечислены экраны: https://reactnavigation.org/docs/en/next/drawer-navigator.html#providing -a-custom-boxcontent *