javascript - The action 'NAVIGATE' with payload {...} was not handled by any navigator - Stack Overflow

admin管理员组

文章数量:1435859

So I'm building an app where i send notification to the user when there's an update. Once the user receives it, on clicking, I want to navigate to a specific screen in my app.

The problem is, to do that I have to use a navigation reference to be able to access the navigation object. I did read the doc, but once applying it I get the following error:

The action 'NAVIGATE' with payload {"name":"HomeScreen","params":{"userName":"Lucy"}} was not handled by any navigator.
Do you have a screen named 'HomeScreen'?

RootNavigation.js:

import * as React from 'react';
import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef()

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
 }
}

App.js:

import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";


import AppNavigator from "./app/navigation/AppNavigator";
import { NavigationContainer } from "@react-navigation/native";
import {navigationRef} from "./app/navigation/rootNavigation";

export default function App() {
  
return (
    <AuthContext.Provider>
      <NavigationContainer  ref={navigationRef}>
        <AppNavigator />
      </NavigationContainer>
    </AuthContext.Provider>
  );
}

AppNavigator.js:

import React, {useEffect, useContext} from "react";
import HomeScreen from "../screens/Home/HomeScreen";
import DashboardScreen from "../screens/Home/DashboardScreen";

import { createDrawerNavigator } from "@react-navigation/drawer";
import FolderNavigator from "./FolderNavigator";
import * as Notifications from "expo-notifications";
import * as RootNavigation from "./rootNavigation";
import AuthNavigator from "./AuthNavigator";
const Drawer = createDrawerNavigator();


const AppNavigator = ({}) => {

    useEffect(() =>{
        registerForPushNotifications()
        Notifications.addNotificationReceivedListener(notification =>{
            RootNavigation.navigate('HomeScreen', { userName: 'Lucy' });
        })

    },[])

    const registerForPushNotifications = async ( ) => {
        try {
            const permissions = await Notifications.getPermissionsAsync();
            if (!permissions.granted) return;
            /*const token = await Notifications.getExpoPushTokenAsync()*/
            const token = (await Notifications.getExpoPushTokenAsync()).data;
            /*await expoPushTokenApi.register(token, user.guid)*/
            /*console.log(token)*/
        } catch (error){
            console.log(error)
        }

    };

    return (
       <Drawer.Navigator>
            <Drawer.Screen
              name="Dashboard"
              ponent={DashboardScreen}
            />
            <Drawer.Screen
              name="Liste des dossiers"
              ponent={FolderNavigator}
            />
            <Drawer.Screen
              name="Liste des clients"
              ponent={HomeScreen}
            />
      </Drawer.Navigator>
)};

export default AppNavigator;

FolderNavigator.js:

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "../screens/Home/HomeScreen";
import FolderDetails from "../screens/FolderDetails";

const Stack = createNativeStackNavigator();

const FolderNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Liste des dossiers"
      ponent={HomeScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="Détails"
      ponent={FolderDetails}
      options={{ headerTitle: "", headerBackTitle: "" }}
    />
  </Stack.Navigator>
);

export default FolderNavigator;

Directory structure:

So I'm building an app where i send notification to the user when there's an update. Once the user receives it, on clicking, I want to navigate to a specific screen in my app.

The problem is, to do that I have to use a navigation reference to be able to access the navigation object. I did read the doc, but once applying it I get the following error:

The action 'NAVIGATE' with payload {"name":"HomeScreen","params":{"userName":"Lucy"}} was not handled by any navigator.
Do you have a screen named 'HomeScreen'?

RootNavigation.js:

import * as React from 'react';
import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef()

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
 }
}

App.js:

import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";


import AppNavigator from "./app/navigation/AppNavigator";
import { NavigationContainer } from "@react-navigation/native";
import {navigationRef} from "./app/navigation/rootNavigation";

export default function App() {
  
return (
    <AuthContext.Provider>
      <NavigationContainer  ref={navigationRef}>
        <AppNavigator />
      </NavigationContainer>
    </AuthContext.Provider>
  );
}

AppNavigator.js:

import React, {useEffect, useContext} from "react";
import HomeScreen from "../screens/Home/HomeScreen";
import DashboardScreen from "../screens/Home/DashboardScreen";

import { createDrawerNavigator } from "@react-navigation/drawer";
import FolderNavigator from "./FolderNavigator";
import * as Notifications from "expo-notifications";
import * as RootNavigation from "./rootNavigation";
import AuthNavigator from "./AuthNavigator";
const Drawer = createDrawerNavigator();


const AppNavigator = ({}) => {

    useEffect(() =>{
        registerForPushNotifications()
        Notifications.addNotificationReceivedListener(notification =>{
            RootNavigation.navigate('HomeScreen', { userName: 'Lucy' });
        })

    },[])

    const registerForPushNotifications = async ( ) => {
        try {
            const permissions = await Notifications.getPermissionsAsync();
            if (!permissions.granted) return;
            /*const token = await Notifications.getExpoPushTokenAsync()*/
            const token = (await Notifications.getExpoPushTokenAsync()).data;
            /*await expoPushTokenApi.register(token, user.guid)*/
            /*console.log(token)*/
        } catch (error){
            console.log(error)
        }

    };

    return (
       <Drawer.Navigator>
            <Drawer.Screen
              name="Dashboard"
              ponent={DashboardScreen}
            />
            <Drawer.Screen
              name="Liste des dossiers"
              ponent={FolderNavigator}
            />
            <Drawer.Screen
              name="Liste des clients"
              ponent={HomeScreen}
            />
      </Drawer.Navigator>
)};

export default AppNavigator;

FolderNavigator.js:

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "../screens/Home/HomeScreen";
import FolderDetails from "../screens/FolderDetails";

const Stack = createNativeStackNavigator();

const FolderNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Liste des dossiers"
      ponent={HomeScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="Détails"
      ponent={FolderDetails}
      options={{ headerTitle: "", headerBackTitle: "" }}
    />
  </Stack.Navigator>
);

export default FolderNavigator;

Directory structure:

• javascript
• ios
• reactjs
• react-native
• expo

Share Improve this question Follow edited Aug 21, 2022 at 17:09 Youssouf Oumar 46.7k1616 gold badges103103 silver badges105105 bronze badges asked Aug 21, 2022 at 12:43 Sb ZakariaSb Zakaria 36911 gold badge77 silver badges2121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

This line RootNavigation.navigate('HomeScreen', { userName: 'Lucy' }) is causing the error, because when setting up your navigation, you didn't name any screen HomeScreen, I'm talking about Stack.Screen's name property and Drawer.Screen's name property.

本文标签： javascriptThe action 39NAVIGATE39 with payloadwas not handled by any navigatorStack Overflow