React Navigation v6中能否从app.js实现页面导航？

你遇到的核心问题是：App.js作为根组件不在导航栈层级内，无法直接获取navigation属性，而useNavigation钩子仅支持函数组件。以下是两种实用的解决办法：

方法一：使用导航容器的Ref（推荐） #

这是React Navigation官方推荐的全局导航方案，适配类组件场景：

1. 在App.js中创建导航容器的Ref，并定义全局导航函数：

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

// 创建导航Ref
const navigationRef = React.createRef();

// 封装全局导航方法
function navigateTo(screenName, params) {
  // 用可选链避免容器未初始化时的报错
  navigationRef.current?.navigate(screenName, params);
}

2. 将Ref传递给NavigationContainer，并在类组件中调用导航方法：

class App extends React.Component {
  // 处理通知点击跳转
  handleNotificationTap = () => {
    // 跳转到目标页面并传递参数
    navigateTo('NotificationDetail', { notifyId: 'xxx' });
  };

  componentDidMount() {
    // 这里注册通知监听（比如FCM、本地通知）
    // 当触发通知点击事件时调用handleNotificationTap
  }

  render() {
    return (
      <NavigationContainer ref={navigationRef}>
        {/* 你的导航栈/底部导航等配置 */}
        {/* 例如 <Stack.Navigator>...</Stack.Navigator> */}
      </NavigationContainer>
    );
  }
}

export default App;

方法二：将类组件转为函数组件（可选） #

如果愿意重构App.js的代码结构，改成函数组件后就能直接使用useNavigation钩子：

import React, { useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';

function App() {
  const navigation = useNavigation();

  useEffect(() => {
    // 注册通知监听
    const handleNotification = () => {
      navigation.navigate('NotificationDetail', { notifyId: 'xxx' });
    };
    // 添加监听逻辑
    return () => {
      // 页面卸载时清理监听
    };
  }, [navigation]);

  return (
    <NavigationContainer>
      {/* 导航配置 */}
    </NavigationContainer>
  );
}

export default App;

若App.js已有大量类组件逻辑，方法一更省心；如果是新项目或重构成本低，方法二更贴合React Navigation的函数式使用习惯。

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