通过React Navigation知道Stack Navigator外部组件中的当前路线吗？

Question

我有一个在NavigationContainer组件内但在Stack Navigator之外的组件。我可以知道组件中当前的路线吗？我无法使用useRoute钩子，因为它出错：

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

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();
}