我如何知道我在 react-navigation 5 中的当前路线？答案

【问题标题】：How can I know my current route in react-navigation 5?我如何知道我在 react-navigation 5 中的当前路线？
【发布时间】：2020-02-06 12:43:38
【问题描述】：

我正在使用这个https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html 从任何来源访问我的导航，我的文件如下所示：

import { createRef } from 'react';

export const navigationRef = createRef();

export function navigate(name, params) {
  return navigationRef.current?.navigate(name, params);
}

export function goBack() {
  return navigationRef.current?.goBack();
}

export function getRootState() {
  return navigationRef.current?.getRootState();
}

这非常适合我的@navigation/drawer，它在我的堆栈导航之外。

只有一个问题是最后一个方法没有同步，我想在我的项目菜单上有一个活动状态，即当前路线。

react navigation 5 怎么可能？

【问题讨论】：

试试这个：navigation.state.routes[navigation.state.index].routeName ...这取决于您的导航结构...所以尝试 console.log navigation.state，你会得到你想要的...
好吧，我不能。我没有使用 v4。在 v5 中，我必须使用 useNavigation() 来访问导航，因为我在堆栈导航器之外（我在抽屉导航器的 DrawerContent 中，它包装了堆栈导航器），所以我无法访问 navigation 对象这边走。这就是我将其链接的原因：reactnavigation.org/docs/en/…
如果你想在抽屉的 contentComponent 中访问 navigation 对象：你可以试试这个：this.props.descriptors.YourStackIdentifer.navigation ...我的意思是 navigation 对象在道具中，不需要使用useNavigation 或类似的东西注入它...
我使用<DrawerNavigator drawerContent={DrawerContent}><Stack.Navigator><ScreenList /></Stack.Navigator></DrawerNavigator>，为了使用useNavigation，您必须在<Stack.Navigator />树中，但DrawerContent不是，所以不可能使用useNavigation。此外，navigation 不会注入到 DrawerContent 中。
我和你有同样的问题，我试过 useNavigation() 和 useNavigationState() 但总是没有最新状态。也许您可以尝试这种方式，我认为目前只有这种方式才能达到State Persistance。通过使用 AsyncStorage 获取最新状态或创建上下文提供程序以在更改更新上下文时存储状态。

标签： javascript reactjs react-native react-native-android react-native-web

【解决方案1】：

我正在使用以下方法来获取 react-navigation v5 中的当前路由名称。 https://reactnavigation.org/docs/navigation-prop/#dangerouslygetstate

const {index, routes} = this.props.navigation.dangerouslyGetState();
const currentRoute = routes[index].name;
console.log('current screen', currentRoute);

【讨论】：

嗨，希望你很好，你能看看我的问题吗？ stackoverflow.com/questions/66548327/…

【解决方案2】：

NavigationContainer 具有 onStateChange 属性，对这种情况很有用，请查看 react-navigation 文档Screen Tracking for analytics，如果您需要在没有导航属性的情况下访问，请参阅Navigating without the navigation prop

我共享代码以仅获取有效的路由名称

function App(){
    const routeNameRef = React.useRef();
    // Gets the current screen from navigation state
    const getActiveRouteName = (state)=> {
        const route = state.routes[state?.index || 0];

        if (route.state) {
          // Dive into nested navigators
          return getActiveRouteName(route.state);
        }

        return route.name;
    };

    return (<NavigationContainer
    onStateChange={(state) => {
      if (!state) return;
      //@ts-ignore
      routeNameRef.current = getActiveRouteName(state);
    }}
    >
    ...
    </NavigationContainer>)
}

【讨论】：

嗨，希望你很好，你能看看我的问题吗？ stackoverflow.com/questions/66548327/…
@kd12345 当然，我做到了

【解决方案3】：

如果你想从一个组件中知道当前屏幕，你也可以使用这个：

export const HomeScreen = ({ navigation, route }) => {

    console.log(route.name);

    return (
        {...}
    );
};

【讨论】：

【解决方案4】：

可以从附加到导航容器的 navigationRef 中获取。 navigationRef 是一个参考。

export const navigationRef = React.createRef()

和

<NavigationContainer
   ref={navigationRef} 
   >
  <Navigator />
</NavigationContainer>

然后使用：const currentRouteName = navigationRef.current.getCurrentRoute().name 获取当前路由名称。

您也可以在功能组件中使用Ref const navigationRef = React.useRef()

【讨论】：

【解决方案5】：

the docs 推荐了一个名为 getFocusedRouteNameFromRoute(route) 的 util 函数。但是 - 它似乎只适用于子屏幕，所以我定义了以下函数来获取活动路由名称：

const getCurrentRouteName = (navigation, route) => {
    if (route.state)
        return getFocusedRouteNameFromRoute(route);
    return route.name;
};

【讨论】：

嗨，希望你很好，你能看看我的问题吗？ stackoverflow.com/questions/66548327/…

【解决方案6】：

这对我有用。在 navigationRef.js 中

let navigator;

export const setNavigator = (nav) => {
  navigator = nav;
};

export const getCurrentRoute = () => {
  const route = navigator.getCurrentRoute();
  return route.name;
};

这可以从任何这样的来源引用

import { getCurrentRoute } from '../navigationRef';

const currentScene = getCurrentRoute();

【讨论】：

我的错，那行是不必要的。我已经编辑了。