单击 Expo Push Noti 时导航到嵌套导航器 [英] Navigate into nested navigator when Expo Push Noti is clicked

问题描述

每当我点击 Expo 推送通知时，我都会尝试导航到某个屏幕.我想要导航到的屏幕位于 NavigationContainer 的深处.

I am trying to navigate to a certain screen whenever I click on an Expo Push Notification. The screen that I want to navigate to is rather deep into the NavigationContainer.

但是，我现在面临的问题是，除了让应用自行重新启动之外，甚至无法导航到任何地方.我在真实设备上运行所有测试.

However, the issue that I am facing now is being unable to even navigate to anywhere except having the app restart on its own. I'm running all the testing on a real device.

我正在使用 Expo 来处理这个学校项目.

I'm using Expo to work on this school project.

我只找到了这个问题 在 SO 和 Expo 论坛(重复)中很有用.

I have only managed to find this question in SO and Expo Forums (duplicate) useful.

这是我的应用程序导航结构:

This is my application Navigation structure:

-Navigation Structure-

AppNavigator
  DrawerNavigator
    MainNavigator
      TabsNavigator
      StackNavigator
      StackNavigator
        TabsNavigator
          ScreenA (Want to navigate to)
          ScreenB (Want to navigate to)
        StackNavigator
          ScreenA
          ScreenB
      StackNavigator
    ScreenA
  AuthNavigator
  RegisterNavigator
  ScreenA

创建了一个 useNotifications 钩子，我在 NavigationContainer 所在的主应用导航器中调用了它.

There is a useNotifications hook created and I called it in the main App Navigator where the NavigationContainer resides in.

import React, { useEffect } from 'react';
import * as Notifications from 'expo-notifications';

import navigation from '../navigation/RootNavigation';

const useNotifications = () => {
  const notiResponseListener = React.createRef();

  useEffect(() => {
    notiResponseListener.current =
      Notifications.addNotificationResponseReceivedListener(res => {
        console.log(res.notification.request.content.data);
        console.log('addNotificationResponseReceivedListener');

        navigation.navigate(
          ('DrawerNavigator', { screen: 'ChangePassword' }),
          {}
        );
      });

    return () =>
      Notifications.removeNotificationSubscription(notiResponseListener);
  }, []);
};

export default useNotifications;

NavigationContainer 中添加了一个 ref.

There is a ref added to the NavigationContainer.

import { navigationRef } from '../navigation/RootNavigation';
import useNotifications from '../hooks/useNotifications';

const App = createStackNavigator();

const AppNavigator = () => {
  useNotifications();

  return (
    <NavigationContainer ref={navigationRef}>
      <App.Navigator headerMode='none'>
        ...
      </App.Navigator>
    </NavigationContainer>
  );
};

最后，包含 NavigationContainer 中使用的 ref 的文件.

And lastly, the file that contains the ref used in the NavigationContainer.

import React from 'react';

export const navigationRef = React.createRef();

const navigate = (name, params) => {
  console.log('entered navigating'); // does not print
  navigationRef.current?.navigate(name, params);
};

export default {
  navigate
};

我已经搜索了高低，但我似乎无法找出问题所在.查看了 Expo 和 React Navigation 的文档，但我不确定发生了什么.这是我第一次处理推送通知和这样的案例.

I have searced high and low but I can't seem to find out what's wrong. Looked at the documentation for Expo and React Navigation but I'm not sure what's going on. It's my first time working on Push Notifications and such a case.

感谢您的帮助，谢谢

推荐答案

我们已经修复了 useLastNotificationResponse 的使用问题.

We have fixed the problem with the usage of useLastNotificationResponse.

    const [notification, setNotification] = useState(false);
    const notificationListener = useRef();
    const responseListener = useRef();

    //add this
    const lastNotificationResponse =
        Notifications.useLastNotificationResponse();

    useEffect(() => {
        if (lastNotificationResponse) {
            //console.log(lastNotificationResponse);

            //get the route
            const route = JSON.stringify(
                lastNotificationResponse.notification.request.content.data.route
            );

            //use some function to return the correct screen by route
            getFullPath(JSON.parse(route));
        }
    }, [lastNotificationResponse]);

根据您的路线，导航到正确的屏幕getFullPath:

Based on your routes, navigate to correct screen getFullPath:

import { navigationRef } from "./rootNavigation";
import routes from "./routes";

export function getFullPath(route) {
    switch (route) {
        case "HomeScreen":
            return navigationRef.current?.navigate(routes.HOME);
        case "Account":
            return navigationRef.current?.navigate(routes.ACCOUNT, {
                screen: routes.ACCOUNTSCREEN,
            });
        default:
            return;
    }
}

这篇关于单击 Expo Push Noti 时导航到嵌套导航器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！