react-navigation - react-navigation 5.0 中的多个抽屉

Question

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

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.

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

我该怎么办？

提前致谢。

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

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