我正在尝试在导航抽屉中嵌套导航堆栈。但它不起作用。似乎是什么问题?
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>
)
}
路由/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}'。请注意,这将使子导航器与父导航器断开连接,您将无法在它们之间导航。”
答案 0 :(得分: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>
)
}