时间戳

首页 > 解决方案 > 单击 Expo Push Noti 时导航到嵌套导航器

javascript - 单击 Expo Push Noti 时导航到嵌套导航器

问题描述

每当我单击 Expo Push Notification 时，我都会尝试导航到某个屏幕。我要导航到的屏幕在NavigationContainer.

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

我正在使用 Expo 来完成这个学校项目。

我只设法在 SO 和 Expo 论坛（重复）中找到这个问题有用。

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

-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钩子，我在它所在的主 App Navigator 中调用了它NavigationContainer。

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;

有一个 ref 添加到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.

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 的文档，但我不确定发生了什么。这是我第一次处理推送通知和这样的案例。

感谢您的帮助，谢谢

标签： javascriptreact-nativeexporeact-navigationexpo-notifications

解决方案

我们已经解决了使用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：

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

推荐阅读