[英]Nesting StackNavigator inside BottomTabNavigator react-navigation v5
Going through my first React Native project, using react-navigation v5, and struggling to work out the logic behind multiple navigators in one.通过我的第一个 React Native 项目,使用 react-navigation v5,并努力找出多个导航器背后的逻辑。
I've tried to copy the 'auth-flow' setup from here, but I have some extra requirements, where once signed in, it should render a bottomTab navigator with three items (create, lists, account) where the second screen lists, renders a list of items where clicking one opens a new screen for the details (where I'd imagine these two screens would be a stack?)我试图从这里复制“auth-flow”设置,但我有一些额外的要求,一旦登录,它应该呈现一个bottomTab导航器,其中包含第二个屏幕列出的三个项目(创建、列表、帐户),呈现一个项目列表,单击一个会打开一个新屏幕以显示详细信息(我想这两个屏幕将是一个堆栈?)
pseudo routes:
- home
- lists
- details <- nested in the tab navigator screen
- account
current setup:当前设置:
export default function App() { return ( <SafeAreaProvider> <NavigationContainer> {isSignedIn? ( <Tab.Navigator> <Tab.Screen name='List' component={TrackListScreen} /> <Tab.Screen name='Create' component={TrackCreateScreen} /> <Tab.Screen name='Account' component={AccountScreen} /> </Tab.Navigator> ): ( <Stack.Navigator> <Stack.Screen name='Signup' component={SignupScreen} /> <Stack.Screen name='Signin' component={SigninScreen} /> </Stack.Navigator> )} </NavigationContainer> </SafeAreaProvider> ); }
You would in this scenario create an extra holding component, such as TrackListHome.在这种情况下,您将创建一个额外的保持组件,例如 TrackListHome。 TrackListHome would be a component that is specifically a StackNavigator, with the initialRouteName being your TrackListScreen, and Details would be another Screen in your StackNavigator.
TrackListHome 将是一个专门为 StackNavigator 的组件,initialRouteName 是您的 TrackListScreen,Details 将是 StackNavigator 中的另一个屏幕。 Then you would be able to call
然后你就可以打电话
props.navigation.navigate("TrackListDetail")
Your StackNavigator might look like this (TrackListHome)您的 StackNavigator 可能看起来像这样 (TrackListHome)
return (
<Stack.Navigator initialRouteName={'TrackListScreen'}>
<Stack.Screen name='TrackListScreen' component={TrackListScreen} />
<Stack.Screen name='TrackListDetail' component={TrackListDetail} />
</Stack.Navigator>)
Then inside of your TabNavigation you would use this TrackListHome component.然后在 TabNavigation 内部,您将使用这个 TrackListHome 组件。
What you'll want to do is make the List
tab it's own stack navigator.您需要做的是让
List
选项卡成为自己的堆栈导航器。 So you'll have this所以你会有这个
export default function App() {
return (
<SafeAreaProvider>
<NavigationContainer>
{isSignedIn ? (
<Tab.Navigator initialRouteName='TrackListNavigator'>
<Tab.Screen name='TrackListNavigator' component={TrackListNavigator} />
<Tab.Screen name='Create' component={TrackCreateScreen} />
<Tab.Screen name='Account' component={AccountScreen} />
</Tab.Navigator>
) : (
<Stack.Navigator>
<Stack.Screen name='Signup' component={SignupScreen} />
<Stack.Screen name='Signin' component={SigninScreen} />
</Stack.Navigator>
)}
</NavigationContainer>
</SafeAreaProvider>
);
}
So then instead of the tab navigating to TrackListScreen
, it instead navigates to a new stack navigator that contains that screen like this因此,它不是导航到
TrackListScreen
的选项卡,而是导航到包含该屏幕的新堆栈导航器,如下所示
export default function TrackListNavigator() {
return (
<Stack.Navigator initialRouteName='TrackListScreen'>
<Stack.Screen name='TrackListScreen' component={TrackListScreen} />
</Stack.Navigator>
)
}
This way, when you are not signed in you will only have access to the Signup
and Signin
screens.这样,当您未登录时,您将只能访问
Signup
和Signin
屏幕。 Then once signed in you will land on the TrackListScreen
with access to any other Stack.Screen
you add to the TrackListNavigator
.然后,一旦登录,您将登陆
TrackListScreen
并访问您添加到TrackListNavigator
Stack.Screen
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.