React Native推送通知点击跳转页面问题求助（使用Stack Navigator）

先修正代码语法错误 #

你当前代码存在两处语法错误，会直接导致逻辑无法执行：

• 将 console.log("Clicked on Notification"). 末尾的点号改为分号 ;
• 将 this.props.navigation.push("Home"). 末尾的点号改为分号 ;

核心问题：导航实例无法在onNotification回调中访问 #

onNotification的回调上下文通常不在导航组件内部，直接调用this.props.navigation无法获取有效导航实例，因此跳转失效。解决核心是全局保存导航实例，通过全局服务调用导航方法。

步骤1：创建导航服务文件

新建NavigationService.js：

import { NavigationActions } from '@react-navigation/native';

let navigator;

export const setNavigator = (nav) => {
  navigator = nav;
};

export const navigate = (routeName, params) => {
  navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
};

export default {
  setNavigator,
  navigate,
};

步骤2：在App.js中注册导航实例

假设你的App使用Stack Navigator，在导航容器中绑定全局实例：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import NavigationService from './NavigationService';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer
      ref={(navigator) => {
        NavigationService.setNavigator(navigator);
      }}
    >
      <Stack.Navigator initialRouteName="Home">
        {/* 你的页面路由配置 */}
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="ActiveNeed" component={ActiveNeedScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

步骤3：修改onNotification回调逻辑

用全局导航服务替换原有的this.props.navigation调用：

import NavigationService from './NavigationService';

// ... 其他代码

onNotification: function (notification) {
  console.log("NOTIFICATIONss:", notification);
  
  if (notification.userInteraction) {
    console.log("Clicked on Notification");
    // 点击通知跳转到Home页面
    NavigationService.navigate("Home");
  }
 
  if (!notification.userInteraction) {
    PushNotification.localNotification({
      foreground: false,
      channelId: notification.channelId,
      channelName: "xShare",
      title: notification.title,
      message: notification.message,
      largeIconUrl: notification.smallIcon,
      // 本地通知点击跳转用导航服务
      onOpen: () => { 
        NavigationService.navigate("ActiveNeed");
      },
    });
    notification.finish(PushNotificationIOS.FetchResult.NoData);
  }
},

额外处理：应用杀死/后台状态下的跳转 #

如果应用处于杀死状态，点击通知启动应用时，需要在初始化阶段处理通知数据，在App.js中添加监听：

import { useEffect } from 'react';
import PushNotification from 'react-native-push-notification';

function App() {
  useEffect(() => {
    // 监听应用启动时的通知数据
    PushNotification.getInitialNotification((notification) => {
      if (notification && notification.userInteraction) {
        NavigationService.navigate("Home");
      }
    });
  }, []);

  // ... 其他代码
}

内容的提问来源于stack exchange，提问作者azim spaculus