如何在 navigation.js 文件中的 react-navigation 中当前路由名称？答案

【问题标题】：How to current route name in react-navigation inside navigation.js file?如何在 navigation.js 文件中的 react-navigation 中当前路由名称？
【发布时间】：2022-11-10 13:52:56
【问题描述】：

我想知道当前的路由名称，但在导航 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 文件中的当前路由名称。

【问题讨论】：

标签： react-native react-hooks navigation react-navigation

【解决方案1】：

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

考虑以下代码 sn-p。

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 在 cmets 中正确指出的那样，如果我们导航到不同的屏幕，这不会更新当前的路线状态。我们需要自己更新它，如下所示。

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

我做了一个snack with some simple navigation buttons。

【讨论】：

它有效，但是当我导航时，名称没有改变
你是对的，我忘记添加这个重要的细节。让我修正一下我的答案。
@jhonantoy 请检查我的更新答案。
非常感谢这个精彩的答案，它的工作^_^

【解决方案2】：

在 v6 中完美运行。

在您的堆栈中，您必须以这种方式将组件转换为子组件：

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

【讨论】：