react-navigation 5.0 中的多个抽屉

Question

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

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

但是我试图找到多个抽屉的容器但没有运气。

我该怎么办？

提前致谢。

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 个抽屉，一个的初始路线为“Home”，另一个为“Blank”。应该渲染哪一个？

在这里，您需要遵循与 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>
  )
}

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