"console.error: "带有有效载荷 {"name":"Login"} 的操作 'navigate' 未被任何导航器处理。”

Question

当前行为

目前，我有一个叠加的堆栈导航器，其中包含用户可以处于的所有状态，代码目前看起来像

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;

但是，在其中一种状态（粗体的 Nav 状态）中，它包含一个包含另外三个状态的选项卡导航器。下面是以下代码：

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

在任何选项卡屏幕的选项卡导航器中，我想要一个按钮，允许我导航回登录屏幕，它是堆栈导航器的一部分，并且在导出默认函数 Nav({navigation} ) 在我执行 {navigation.navigate('Login')}}> 的选项卡导航器之外。但是，在选项卡导航器中，例如，函数 HomeScreen({navigation})，当我尝试运行相同的代码以导航到登录屏幕时，它会出现以下错误：

"console.error: "带有有效载荷 {"name":"Login"} 的操作 'navigate' 未被任何导航器处理。”

我知道这与嵌套导航器问题有关，但我一直在试图解决这个问题并整天修复它但无济于事。我确信我需要将 {navigation} 传递到 Tab 中。屏幕组件，但我不是特别确定如何做到这一点。如果有人知道如何解决这个问题，请告诉我。谢谢！！！

Answer 1

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

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