react-navigation 5.0 中的多个抽屉 [英] Multiple drawers in react-navigation 5.0

问题描述

我写了下面的代码来制作多个侧边菜单，但发生错误

I wrote below code to make multiple side menus but it occurred error

另一个导航器已为此容器注册.您可能在一个NavigationContainer"或Screen"下有多个导航器.确保每个导航器都位于单独的屏幕"容器下.

Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container.

然而，我试图找到多个抽屉的容器，但没有运气.

However I've tried to find the Container for multiple drawers but no luck.

我该怎么办?

提前致谢.

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>
);

推荐答案

你写的方式行不通，因为考虑一下:你有 2 个抽屉，一个初始路径为家"，另一个为空白的".应该渲染哪一个?

The way you wrote it won't work, because consider this: you've 2 drawers, one has initial route as "Home", and other as "Blank". Which one should be rendered?

在这里，您需要遵循与 React Navigation 4 相同的方法，将一个抽屉放在另一个抽屉中:

Here, you need to follow the same approach as React Navigation 4, put one drawer inside another:

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>
  )
}

由于您的左侧抽屉不会显示您在 Stack 中的屏幕，您需要为您的抽屉提供一个列出屏幕的自定义组件:https://reactnavigation.org/docs/en/next/drawer-navigator.html#providing-a-custom-抽屉内容

Since your left drawer won't show the screens that you have in Stack, you will need to provide a custom component for your drawer which lists the screens: https://reactnavigation.org/docs/en/next/drawer-navigator.html#providing-a-custom-drawercontent

这篇关于react-navigation 5.0 中的多个抽屉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！