[英]How can I know my current route in react-navigation 5?
I am using this https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html to access my navigation from any source, my file look as follow:我正在使用这个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();
}
This is perfect for my @navigation/drawer
, which is outside my stack navigation.这非常适合我的@navigation/drawer
,它在我的堆栈导航之外。
Only one problem the last method is not synchronized and I want to have an active state on my item menu that is the current route.只有最后一个方法不同步的一个问题,我希望在我的项目菜单上有一个活动状态,即当前路线。
How is that possible with react navigation 5?反应导航5怎么可能?
I am using the following approach to get the current route name in react-navigation v5.我正在使用以下方法来获取 react-navigation v5 中的当前路线名称。 https://reactnavigation.org/docs/navigation-prop/#dangerouslygetstate https://reactnavigation.org/docs/navigation-prop/#dangerouslygetstate
const {index, routes} = this.props.navigation.dangerouslyGetState();
const currentRoute = routes[index].name;
console.log('current screen', currentRoute);
The NavigationContainer has onStateChange prop, useful for this case, check react-navigation docs Screen Tracking for analytics and if you need access without navigation prop see Navigating without the navigation prop NavigationContainer 有 onStateChange 道具,在这种情况下很有用,检查 react-navigation docs Screen Tracking 以进行分析,如果您需要在没有导航道具的情况下访问,请参阅没有导航道具的导航
I share the code to get only active routeName我共享代码以仅获取活动的 routeName
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>)
}
If you want to know the current screen from a component you can also use this:如果您想从组件中了解当前屏幕,您还可以使用以下命令:
export const HomeScreen = ({ navigation, route }) => {
console.log(route.name);
return (
{...}
);
};
It is possible to get this from the navigationRef attached to the navigation container.可以从附加到导航容器的 navigationRef 中获取它。 Where navigationRef is a ref.其中 navigationRef 是参考。
export const navigationRef = React.createRef()
and和
<NavigationContainer
ref={navigationRef}
>
<Navigator />
</NavigationContainer>
Then use: const currentRouteName = navigationRef.current.getCurrentRoute().name
to get the current route name.然后使用: const currentRouteName = navigationRef.current.getCurrentRoute().name
获取当前路线名称。
Alternatively in a functional component you can useRef const navigationRef = React.useRef()
或者,在功能组件中,您可以 useRef const navigationRef = React.useRef()
There is a util function called getFocusedRouteNameFromRoute(route)
which the docs recommends. 文档推荐了一个名为getFocusedRouteNameFromRoute(route)
实用函数。 BUT - it seems its working only for child screen, so I defined the following function to get the active route name:但是 - 它似乎只适用于子屏幕,所以我定义了以下函数来获取活动路由名称:
const getCurrentRouteName = (navigation, route) => {
if (route.state)
return getFocusedRouteNameFromRoute(route);
return route.name;
};
This works for me.这对我有用。 In navigationRef.js在 navigationRef.js 中
let navigator;
export const setNavigator = (nav) => {
navigator = nav;
};
export const getCurrentRoute = () => {
const route = navigator.getCurrentRoute();
return route.name;
};
This can be referred from any source like this这可以从任何这样的来源引用
import { getCurrentRoute } from '../navigationRef';
const currentScene = getCurrentRoute();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.