如何在app.js文件中通过React Navigation实现页面跳转？

我来帮你搞定这个页面跳转的问题！你当前的代码核心问题是没有把导航容器的实例传递给NavigationService，导致_navigator一直是未定义状态，调用navigate方法自然不会生效。下面是具体的修改步骤和原理说明：

第一步：调整MainNavigation.js的导出方式 #

首先我们需要把导航容器的实例单独存起来，方便后续设置ref：

import { createDrawerNavigator, createAppContainer } from 'react-navigation';
// 请确保已正确导入HomeScreen和ScanScreen

const MyDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Scan: {
    screen: ScanScreen,
  },
});

// 将导航容器实例赋值给变量后再导出
const AppNavigator = createAppContainer(MyDrawerNavigator);
export default AppNavigator;

第二步：在App.js中给导航容器设置Ref #

接下来在App.js里，给<AppNavigator>添加ref属性，把导航实例传递给NavigationService的setTopLevelNavigator方法：

import React from 'react';
import { Platform } from 'react-native';
import AppNavigator from './MainNavigation'; // 注意路径要和你的文件实际位置对应
import NavigationService from './src/utils/helpers/NavigationService';

const App = () => {
  var PushNotification = require("react-native-push-notification");
  
  PushNotification.configure({
    onNotification: function(notification) {
      let num = 0;
      if (Platform.OS === 'ios') {
        num = notification.data.num;
      } else {
        num = notification.userInfo.num;
      }
      switch(num) {
        case 1:
          NavigationService.navigate('Scan', {a: 'a'});
          break;
        default:
          console.warn("NUMBER NOT FOUND");
      }
    }
  })

  return (
    // 添加ref，将导航实例传入NavigationService
    <AppNavigator 
      ref={(navigatorRef) => {
        NavigationService.setTopLevelNavigator(navigatorRef);
      }} 
    />
  );
}

export default App;

第三步：理解NavigationService的工作机制 #

你的NavigationService代码本身是没问题的，它的核心逻辑是：

• 用全局变量_navigator存储导航容器的实例
• setTopLevelNavigator方法负责把外部获取到的导航实例赋值给_navigator
• navigate方法通过调用导航实例的dispatch方法，发送NavigationActions.navigate指令来触发页面跳转

简单来说，就是通过ref获取到React Navigation的核心导航实例，让我们在非组件环境（比如PushNotification的回调函数里）也能调用导航方法。

额外检查点 #

• 确保路由名称'Scan'和MainNavigation里定义的完全一致（React Navigation对路由名称大小写敏感）
• 测试推送通知触发时，num变量能正确获取到预期的数值

这样修改之后，当推送通知触发时，就能成功跳转到Scan页面啦！

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