关于React-Native如何判断当前router路径的方法

最新推荐文章于 2025-06-04 09:20:20 发布

要做前端的一股清流

最新推荐文章于 2025-06-04 09:20:20 发布

阅读量4.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：移动端前端文章标签： route name reactNative 路由 this.props.navigation 路由路径 createAppContainer

本文链接：https://blog.youkuaiyun.com/qq_31915745/article/details/91346477

背景：还是那个可爱的产品经理，需要我在app的tab页面和tab二级页面做不同处理，那么问题来了，在主程序中，构建底部tab，我们用的是createBottomTabNavigator这个方法，也就是说，不能用this.props.navigation这个方法去判断当前是在tab主页面还是二级页。好吧，那就看看怎么解决这个问题。

解决方法：

RN的官方文档里给出了解答。直接贴代码

import { createAppContainer, createStackNavigator } from 'react-navigation';
import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';

const tracker = new GoogleAnalyticsTracker(GA_TRACKING_ID);

// gets the current screen from navigation state
function getActiveRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  // dive into nested navigators
  if (route.routes) {
    return getActiveRouteName(route);
  }
  return route.routeName;
}

const AppNavigator = createStackNavigator(AppRouteConfigs);
const AppContainer = createAppContainer(App