时间戳

首页 > 解决方案 > 如何在 React Native 中的抽屉导航组件中嵌套堆栈导航

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

问题描述

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

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

路线/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>
  )
}

路线/抽屉.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'。通常你只需要一个应用程序的根容器，所以这可能是一个错误。如果这是故意的，传递'独立={true}'。请注意，这将使子导航器与父导航器断开连接，您将无法在它们之间导航。”

标签： reactjsreact-nativemobile

解决方案

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

推荐阅读