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

Question

我有一个组件在 NavigationContainer 组件内但在 Stack Navigator 之外。我能知道组件中的当前路由是什么吗？我不能使用 useRoute Hook ，因为它出错了:

Couldn't find a route object. Is your component inside a screen in a navigator?

Answer 1

您需要遵循 react-navigation 中的指南 docs .它解释了如何获得对 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();
}