如何解决使用参考文献的世博导航在通知上不起作用

82 阅读1分钟

我正在建立一个应用程序,当有更新时,我会向用户发送通知。一旦用户收到通知,在点击时,我想导航到我的应用程序中的一个特定屏幕。问题是,要做到这一点,我必须使用一个导航参考,以便能够访问导航对象。我读过文档,但一旦应用它,我就会得到以下错误:

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"
              component={DashboardScreen}
            />
            <Drawer.Screen
              name="Liste des dossiers"
              component={FolderNavigator}
            />
            <Drawer.Screen
              name="Liste des clients"
              component={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"
      component={HomeScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen
      name="Détails"
      component={FolderDetails}
      options={{ headerTitle: "", headerBackTitle: "" }}
    />
  </Stack.Navigator>
);

export default FolderNavigator;