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

Question

I am updating my code to use the react-navigation 5.x, but I don't know how to implement the stack navigation with a bottom tab navigator in this version. I use the bottom tab navigator only on the screens that appear after the user logs in. On the initial screen, there is only navigation with custom buttons. My problem is I don't know how to create the route to that necessity I have. I've been looking for a code example, but I only found codes that use the bottom tab navigator alone. Could you please give me an example of code I can use? I would appreciate it

I have this piece of code that is what I have working right now

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

you can do somethin like this:

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

The Component B going to be called in the Bottom Tab Navigator and the initial route is gonna be the Component C.