Javascript &引用；console.error:"；行动'；导航'；对于有效负载{quot；name"；：“Login"；}未由任何导航器处理&引用；

当前行为

目前，我有一个覆盖堆栈的导航器，它包含用户可以处于的所有状态， 代码现在看起来像

function GoToButton({ screenName }) {
    const navigation = useNavigation();

    return (
      <TouchableOpacity
        onPress={() => navigation.navigate(screenName)}
      />
    );
}
const AppNavigator = createStackNavigator({
    Login: {screen: Login},
    SignUp: {screen: SignUp},
    Nav: {screen: Nav},
    ConfirmEmail: {screen: ConfirmEmail},
    Onboard: {screen: Onboard},
    Map: {screen: Map}

    },{ headerMode: 'none' },
    {
        // Specifing Initial Screen
        initalRoute: 'Login'
    }
);
const App = createAppContainer(AppNavigator);

export default App;

函数GoToButton（{screenName}）{
const navigation=useNavigation（）；
返回(
导航。导航（屏幕名称）}
/>
);
}
const AppNavigator=createStackNavigator({
登录：{屏幕：登录}，
注册：{屏幕：注册}，
导航：{屏幕：导航}，
确认邮件：{屏幕：确认邮件}，
机载：{屏幕：机载}，
映射：{屏幕：映射}
}，{headerMode:'none'}，
{
//指定初始屏幕
initalRoute:'登录'
}
);
const App=createAppContainer（AppNavigator）；
导出默认应用程序；

但是，在其中一个状态中，以粗体显示的导航状态包含一个包含另外三个状态的选项卡导航器。以下是代码：

function HomeScreen({navigation}) {
  return (
    <View style={Styles.container}>
      <Text style={Styles.logo}>
        LOGO
      </Text>
      <TouchableOpacity onPress={()=> {navigation.navigate('Login')}}>
      <Text>Display Login screen</Text>
      </TouchableOpacity>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function Nav({navigation}){
    return (
      <NavigationContainer>
        <Tab.Navigator initialRouteName="Home">
          <Tab.Screen name="Contact" component={ContactScreen} />
          <Tab.Screen name="Home" component = {HomeScreen}/>
          <Tab.Screen name="Profile" component={ProfileScreen} />
        </Tab.Navigator>
        <TouchableOpacity onPress={()=> {navigation.navigate('Login')}}>
         <Text> Display Login Screen</Text>
        </TouchableOpacity>
      </NavigationContainer>
    );
}

功能主屏幕（{navigation}）{
返回(
标志
{navigation.navigate（'Login'）}>
显示登录屏幕
);
}
const Tab=createBottomTabNavigator（）；
导出默认函数Nav（{navigation}）{
返回(
{navigation.navigate（'Login'）}>
显示登录屏幕
);
}

在任何选项卡屏幕的选项卡导航器中，我需要一个按钮，该按钮允许我导航回登录屏幕，登录屏幕是堆栈导航器的一部分，在我执行{navigation.navigate（'login'）}>的选项卡导航器之外的导出默认函数Nav（{navigation}）中的以下代码中工作正常。但是，在选项卡导航器中，例如，函数主屏幕（{navigation}），当我尝试运行相同的代码导航到登录屏幕时，会出现以下错误：

“console.error:”任何导航器都未处理有效负载为{“name”：“Login”}的操作“navigate”。"

我知道这与嵌套的导航器问题有关，但我一直在努力解决这个问题，并且一整天都在修复它，但没有任何效果。我确信我需要将{navigation}传递到选项卡。屏幕组件中，但我不太确定如何做。如果有人知道如何修复，请告诉我。谢谢！！！

<NavigationContainer>
    <Tab.Navigator initialRouteName="Home">
        <Tab.Screen name="Contact" component={ContactScreen} />
        <Tab.Screen name="Home" component = {HomeScreen}/>
        <Tab.Screen name="Profile" component={ProfileScreen} />
   </Tab.Navigator>

   //NavigationContainer doesn't recognize the below code.
   <TouchableOpacity onPress={()=> {navigation.navigate('Login')}}>
      <Text> Display Login Screen</Text>
   </TouchableOpacity>
</NavigationContainer>

//NavigationContainer无法识别以下代码。
{navigation.navigate（'Login'）}>
显示登录屏幕

NavigationContainer负责管理应用程序状态并将顶级导航器链接到应用程序环境。它负责平台特定的集成并提供各种有用的功能。但它不处理布局组件

---

更好的选择是在导航屏幕的标题上有一个登录按钮，您可以在其中实现navigate（）

噢，但在该段中，它不会抛出任何错误，当我按下按钮时，它工作正常，这是函数主屏幕（{navigation}）{return（徽标）中的另一个相同代码{navigation.navigate（'Login'）}>显示登录屏幕）；}其中{navigation.navigate（'Login'）}抛出错误