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

Question

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

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}'。请注意，这将使子导航器与父导航器断开连接，您将无法在它们之间导航。"

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

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

How to nest a Stack Navigation inside a Drawer Navigation Component in React Native

mobile

reactjs

react-native