如何在navigation.js文件中的react导航中显示当前路线名称

Question

我想知道当前的路线名称，但在导航js文件中，我在任何组件中都使用useRoute挂钩，并且运行良好，但当我在navigation.js 中使用useRoute

错误：找不到路由对象。您的组件在导航器的屏幕内吗？

navigation.js代码示例，

export default function Navigation() {
const route = useRoute(); // show error >> Error: Couldn't find a route object. Is your component inside a screen in a navigator?

return (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
</Stack.Navigator>
);
}

当我删除useRoute时，错误就消失了，但我需要使用useRoute或任何其他方式在navigation.js文件中获取当前路由名称。

Answer 1

您可以将navigationContainerRef从NavigationContainer传递到Navigation共组件，以使navigation对象可访问。

请考虑以下代码片段。

import { createNavigationContainerRef } from "@react-navigation/native"
export const navigationRef = createNavigationContainerRef()
const App = () => {
return <NavigationContainer
ref={navigationRef}>
<Navigation navigation={navigationRef} />
</NavigationContainer>  
}
export default App

然后，在Navigation。

export default function Navigation({ navigation }) {
const route = navigation.current?.getCurrentRoute()

return (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
</Stack.Navigator>
);
}

然后使用route?.name访问当前路由名称。

编辑：正如jhon-antoy在评论中正确指出的那样，如果我们导航到不同的屏幕，这不会更新当前的路线状态。我们需要自己更新如下。

export const navigationRef = createNavigationContainerRef();
const App = () => {
const [routeName, setRouteName] = useState();
return (
<NavigationContainer
ref={navigationRef}
onReady={() => {
setRouteName(navigationRef.getCurrentRoute().name)
}}
onStateChange={async () => {
const previousRouteName = routeName;
const currentRouteName = navigationRef.getCurrentRoute().name;
console.log("route", currentRouteName)
setRouteName(currentRouteName);
}}
>
<Navigation routeName={routeName} />
</NavigationContainer>
);
}
export default App;

Navigation内部。

export function Navigation(props) {
const route = props.routeName
console.log(props)
return (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
</Stack.Navigator>
);
}

我用一些简单的导航按钮做了一个小吃。

Answer 2

在v6中完美工作。

在堆栈中，必须将组件转换为子组件。。这样：

<RootStack.Screen
name={NameOfYourRoute}
children={props => (
<NameOfYourStack {...props} currentRoute={currentRoute} />
)}
/>