如何将当前路由名称传递给不在 App Container 内的“react-navigation”中的其他组件

【问题标题】：How to pass current route name to other component in 'react-navigation' that is not inside App Container如何将当前路由名称传递给不在 App Container 内的“react-navigation”中的其他组件
【发布时间】：2019-10-07 20:33:04
【问题描述】：

我有自定义导航栏，位于我的 AppContainer 旁边，我想根据导航器的当前 routeName 执行一些逻辑，我该怎么做？

我已尝试将导航作为参考传递，如此处所述 https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html 但在该导航道具中我没有当前路线名称。

const [navigation, setNavigation] = useState(null);

<AppContainer ref={nav => setNavigation(nav)} />
<NavBar navigation={navigation} />

const NavBar = ({ navigation }) => {
    return <div>{navigation.state.routeName}</div> 
};

// routeName is undefined

【问题讨论】：

标签： reactjs react-native react-navigation

【解决方案1】：

您可以获得导航器对象的当前routeName，如下所示：

const {state: {routes, index}} = navigation;
const currentRouteName = routes[index];

实际上，导航器对象的所有路由都在 routes 属性中，您在创建导航器时定义它们； index 属性是应用程序当前最近导航到的 routes 中的索引号。

注意如果您当前的routes[index] 本身就是一个内部导航器（就像抽屉导航器中的一个堆栈导航器），您应该在内部导航器上执行上述相同操作，以到达应用程序当前导航到它的真实 routeName。

但是，您的情况似乎并不复杂，您只需将上述代码应用于 navigation 对象一次即可获得所需的 routeName。

【讨论】：