如何使用 React 导航将堆栈导航与底部选项卡导航器一起使用 5.X

Question

我正在更新我的代码以使用 react-navigation 5.x，但我不知道如何在此版本中使用底部选项卡导航器实现堆栈导航。我只在用户登录后出现的屏幕上使用底部选项卡导航器。在初始屏幕上，只有带有自定义按钮的导航。我的问题是我不知道如何创建满足我所需要的途径。我一直在寻找代码示例，但我只找到了单独使用底部选项卡导航器的代码。你能给我一个我可以使用的代码示例吗？我会很感激

我现在有这段代码

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

import Login from '../screens/Login'
import Register from '../screens/Register'
import Main from '../screens/Main'
import Ex1 from '../screens/Ex1'
import Ex2 from '../screens/Ex2'

const AuthStack = createStackNavigator();

const AuthStackScreen = () => (
    <NavigationContainer>
        <AuthStack.Navigator 
        initialRouteName="Login" 
        screenOptions={{
            headerShown: false
        }}>
            <AuthStack.Screen
            name="Login"
            component={Login}
            />
            <AuthStack.Screen
            name="Register"
            component={Register}
            />
        </AuthStack.Navigator>
    </NavigationContainer>
);

export default AuthStackScreen

Answer 1

你可以这样做：

export default function ComponentC() {
    return(
        <View>
            <Text>It Works!</Text>
        </View>
    )
}

export default function ComponentB() {
  return (
    <Stack.Navigator initialRouteName={'Main'}>
        <Stack.Screen name={'Main'} component={ComponentC} />
    </Stack.Navigator>   
  );
} 

export default function ComponentA () {
    return (
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName={'ComponentB'}
        >
          <Tab.Screen name={'ComponentB'} component={ComponentB} options={{ tabBarIcon: ({color}) => (
              <FontAwesome5 color={color}  name={'check-square'} size={20}/>
          )}} />
        </Tab.Navigator>
      </NavigationContainer>    
    );
  }

将在底部选项卡导航器中调用组件 B，初始路由将是组件 C。

如何使用 React 导航将堆栈导航与底部选项卡导航器一起使用 5.X

How to use stack navigation with bottom tab navigator using React navigation 5.X

react-native

react-native-android

react-native-navigation

react-navigation