React Native navigation ref始终为null，导航无法触发求解决

问题根源 #

你遇到的核心问题是导入导出不匹配：导航工具文件中创建了navigationRef但未将其作为命名导出，而组件里却用{navigationRef}的命名导入方式，导致传入NavigationContainer的ref和工具文件里用于导航的navigationRef是两个完全独立的引用，因此current始终为null。

修复步骤 #

1. 修改导航工具文件，导出正确的navigationRef
   将工具文件中的navigationRef改为命名导出，确保组件能导入到同一个引用：

   import React from 'react';
   
   // 改为命名导出，让组件能正确导入
   export const navigationRef = React.createRef();
   
   const navigate = (name, params) => {
       navigationRef.current?.navigate(name, params);
   }
   
   export default {
       navigate
   }
   

2. 确认组件中导入的是同一个navigationRef
   确保组件里的导入路径和工具文件一致，使用正确的命名导入：

   import { navigationRef } from "./path-to-your-navigation-util-file";
   
   <NavigationContainer ref={navigationRef}>
       {/* 你的导航栈/标签栏等结构 */}
   </NavigationContainer>
   

3. 额外排查点

   • 确保NavigationContainer已经完成挂载：不要在应用启动初期（比如还没渲染导航容器的同步代码中）调用navigation.navigate，可以放在useEffect或者用户交互事件（如按钮点击）中触发。
   • 如果你使用React Navigation 6及以上版本，推荐使用官方提供的useNavigationContainerRef替代React.createRef，它是专门为导航容器设计的ref：

     import { useNavigationContainerRef } from '@react-navigation/native';
     import React from 'react';
     
     export const navigationRef = useNavigationContainerRef();
     
     const navigate = (name, params) => {
         // 这里不需要?.，因为useNavigationContainerRef返回的ref在容器挂载后一定会有值
         navigationRef.navigate(name, params);
     }
     
     export default {
         navigate
     }
     

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