如何使用子菜单导航器和屏幕导航器！，将导航属性获取到子屏幕，

Question

我不知道如何获取导航属性以切换到子屏幕。

我以为我的代码不错，但是先验后就行不通了...当我将包含容器的导航容器包含在tab.navigator中时，tab导航器屏幕接受了导航，但其他菜单却不接受导航，现在我进行了更改，并包括了在我的NavigationContainer中的stack.navigator的屏幕上，但它也不起作用...我有错误：

无法注册导航器。您是否包装了您的应用 “ NavigationContainer”？

我迷路了，有人可以帮我吗？ 非常感谢...

import React from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator} from "@react-navigation/stack";
import { NavigationContainer } from '@react-navigation/native';
import Authentication from '../../Screens/Authentication';
import Activities from '../../Screens/Activities';
import Login from '../../Screens/Authentication/Login';
import Register from '../../Screens/Authentication/Register';
import Tools from '../../Screens/Tools';
import Dashboard from '../../Screens/Dashboard';
import Orders from '../../Screens/Orders';
import Completed from '../../Screens/Orders/Completed';
import Current from '../../Screens/Orders/Current';
import Details from '../../Screens/Orders/Details';
import Settings from '../../Screens/Settings';
import Scan from '../../Screens/Tools/Scan';
import Products from '../../Screens/Tools/Products';
import Tickets from '../../Screens/Tools/Tickets';
import Welcome from '../../Screens/Welcome';
import i18n from '../../src/i18n';
import styles from '../../assets/styles';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

export default function ScreenNavigator() {
  return(
    <NavigationContainer>
      <Stack.Navigator>       
        <Stack.Screen name = 'Orders' component = {Orders} options={{ title: i18n.t("orders.title") }}/> 
        <Stack.Screen name = 'Authentication' component = {Authentication} options={{ title: i18n.t("authentication.title") }}/>  
        <Stack.Screen name = 'Activities' component = {Activities} options={{ title: i18n.t("activities.title") }}/>  
        <Stack.Screen name = 'Login' component = {Login} options={{ title: i18n.t("login.title") }}/>
        <Stack.Screen name = 'Register' component = {Register} options={{ title: i18n.t("register.title") }}/>
        <Stack.Screen name = 'Tools' component = {Tools} options={{ title: i18n.t("tools.title") }}/>
        <Stack.Screen name = 'Scan' component = {Scan} options={{ title: i18n.t("scan.title") }}/>      
        <Stack.Screen name = 'Current' component = {Current} options={{ title: i18n.t("current.title") }}/>
        <Stack.Screen name = 'Completed' component = {Completed} options={{ title: i18n.t("completed.title") }}/>
        <Stack.Screen name = 'Details' component = {Details} options={{ title: i18n.t("details.title") }}/> 
        <Stack.Screen name = 'Products' component = {Products} options={{ title: i18n.t("products.title") }}/>      
        <Stack.Screen name = 'Tickets' component = {Tickets} options={{ title: i18n.t("tickets.title") }}/>
        <Stack.Screen name = 'Dashboard' component = {Dashboard} options={{ title: i18n.t("dashboard.title") }}/>
        <Stack.Screen name = 'Settings' component = {Settings} options={{ title: i18n.t("settings.title") }}/>
        <Stack.Screen name = 'Welcome' component = {Welcome} options={{ title: i18n.t("welcome.title") }}/>
      </Stack.Navigator>
    </NavigationContainer>
  )
}

 export function AppNavigation() {
  return (    
      <Tab.Navigator tabBarOptions={{activeTintColor: 'black',
                     labelStyle: {fontSize: 12, color: 'white'}, 
                     style: {backgroundColor: '#F78400'},
                     }}>
        <Tab.Screen
          name={i18n.t("orders.title")}
          component={ScreenNavigator}
          options={{
              tabBarIcon: ({ focused, horizontal, tintColor }) => {
                return (
                  <Image
                    source={require("../../assets/images/orders.png")}
                    style={styles.icon}
                  />
                );
              }
          }}
        />
        <Tab.Screen
          name={i18n.t("dashboard.title")}
          component={Dashboard}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../../assets/images/dashboard.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("tools.title")}
          component={Tools}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../../assets/images/tools.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("settings.title")}
          component={Settings}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../../assets/images/settings.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
      </Tab.Navigator>    
  )
}

App.js：

import React from "react";
import {
  View,
  Text,
  StatusBar,
  Image,
  ActivityIndicator,
} from "react-native";
import {
  retrieveAppLang,
  userSessionActive
} from "./src/common/Preferences";
import i18n from "./src/i18n";
import styles from './assets/styles';
import Authentication from './Screens/Authentication'
import { ScreenNavigator, AppNavigation } from './src/Navigation';


export default class App extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
        isFirstConnection: true,
        status: 0,      
      };
  }

  async UNSAFE_componentWillMount() {
    let lang = await retrieveAppLang();
    let isConnected = await userSessionActive();

    if (lang.length == 2) {
      i18n.changeLanguage(lang);
    }

    if (isConnected === true && this.props && this.props.navigation) {
      this.props.navigation.navigate("ScreenNavigator");
    }
  }

  async componentDidMount() {
 
    const data = await this.performTimeConsumingTask();
    if (data !== null) {
      this.setState({
        isFirstConnection: false,
        status: 1,
      });
    }
  }

    async performTimeConsumingTask() {
      return new Promise((resolve) =>
        setTimeout(() => {
          resolve("result");
        }, 750)
      );
    };

  render() {
    if (this.state.status == 1) {
      if (this.state.isFirstConnection ) {
        return <Authentication />;
      } else {
        return <AppNavigation />
      }
    }

    return (
        <View style={styles.container}>
          <StatusBar hidden={true} />
          <View style={styles.subContainer}>
            <Image
              style={styles.logo}
              source={require("./assets/images/logo.png")}
            />
            <ActivityIndicator size="large" color="#F78400" />
            <Text>{i18n.t("app.loading") + "..."}</Text>
          </View>
        </View>
    );
  }
}