如何在 React Native 中的抽屉导航组件中嵌套堆栈导航答案

【问题标题】：How to nest a Stack Navigation inside a Drawer Navigation Component in React Native如何在 React Native 中的抽屉导航组件中嵌套堆栈导航
【发布时间】：2021-03-17 10:31:31
【问题描述】：

我正在尝试将导航堆栈嵌套在导航抽屉中。但它不起作用。似乎是什么问题？

App.js（主文件）

import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppLoading from 'expo-app-loading';
import Navigator from './routes/Drawer';



export default function App() {

  return (
    <Navigator /> 
  )
}

routes/HomeStack.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from '../screens/home';
import ReviewDetails from '../screens/reviewDetails';

const Stack = createStackNavigator()

export default Navigator = () => {
  return (
    <NavigationContainer initialRouteName='Home'>
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}  
      >
        <Stack.Screen name='Home'component={Home} />
        <Stack.Screen name='ReviewDetails' component={ReviewDetails} options={{ title: 'Review Details' }} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

routes/Drawer.js

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import HomeStack from './HomeStack';
import AboutStack from './AboutStack';

const RootDrawerNavigator = createDrawerNavigator();

export default function Drawer() {
  return (
    <NavigationContainer>
      <RootDrawerNavigator.Navigator initialRouteName="Home">
        <RootDrawerNavigator.Screen name="Home" component={HomeStack} />
        <RootDrawerNavigator.Screen name="About" component={AboutStack} />
      </RootDrawerNavigator.Navigator>
    </NavigationContainer>
  );
}

我得到了这个错误：“错误：看起来你已经在另一个容器中嵌套了一个'NavigationContainer'。通常你只需要一个位于应用程序根目录的容器，所以这可能是一个错误。如果这是故意的，请明确传递 'independent={true}'。请注意，这将使子导航器与父导航器断开连接，您将无法在它们之间导航。”

【问题讨论】：

什么应该去哪里？你的应用程序中有Navigator，然后有Stack 导航器，然后你有你的Drawer，其中包含你的HomeStack?所以App 在Drawer 里面？这是如何工作的？
@Konstantin 导航器是抽屉，我只是重命名它。我想把 HomeStack & (AnotherStack) 放在抽屉里

标签： reactjs react-native mobile

【解决方案1】：

如果Navigator 是您的Drawer，并且您想在其中嵌套StackNavigator，那么您所要做的就是将NavigationContainer 放入您的抽屉并将其从StackNavigator 中删除。你不需要再重复一遍，因为StackNavigator 已经在NavigationContainer 里面了。

类似：

const RootDrawerNavigator = createDrawerNavigator();

export default function Drawer() {
  return (
    <NavigationContainer>
      <RootDrawerNavigator.Navigator initialRouteName="Home">
        <RootDrawerNavigator.Screen name="Home" component={HomeStack} /> // HomeStack is your Stack.Navigator
        <RootDrawerNavigator.Screen name="About" component={AboutStack} />
      </RootDrawerNavigator.Navigator>
    </NavigationContainer>
  );
}

和

const Stack = createStackNavigator()

export default function HomeStack() {
  return (
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}  
      >
        <Stack.Screen name='Home' component={Home} />
        <Stack.Screen name='ReviewDetails' component={ReviewDetails} options={{ title: 'Review Details' }} />
      </Stack.Navigator>
  )
}

【讨论】：