react-navigation - 使用 React Navigation 了解 Stack Navigator 之外的组件中的当前路由是什么？

Question

我有一个组件在NavigationContainer组件内但在Stack Navigator. 我可以知道组件内的当前路由是什么吗？我不能使用useRoute钩子，因为它错误：

找不到路由对象。您的组件是否在导航器的屏幕内？

标签： react-navigation

Answer 1

您需要遵循react-navigation 文档中的本指南。它解释了如何访问 a NavigationContainer ref，然后您可以使用它来访问应用程序的当前导航状态，即使在组件之外也是如此。

这是一个简短的演示，以防将来此链接中断。

// App.js

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './Navigation';

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

// Navigation.js

import React from 'react';

export const navigationRef = React.createRef();

// You can export navigation functions to use throughout your app, without accessing the `navigation` prop.
export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

// This is the function you want, it will return the complete navigation state
export function getRootState() {
  return navigationRef.current?.getRootState();
}