如何获得活动路线 react-navigation-5？答案

【问题标题】：How to get active route react-navigation-5?如何获得活动路线 react-navigation-5？
【发布时间】：2020-06-07 09:31:06
【问题描述】：

我在我的 react 本机应用程序中使用 react-navigation 5。在我的应用程序中，我有几个可切换的屏幕，例如 Auth、Home、Onboarding 等。在主页中，我有一个完全自定义的标题和嵌套导航器。在嵌套导航器中，我有 2 个屏幕 List 和 Settings。我想在显示 List 屏幕时在标题中显示一个齿轮图标，并在显示 Settings 屏幕时显示一个主页图标。为此，我想要当前活动的路线名称。如何从 react-navigation 的主页中获取活动的嵌套路由名称？

【问题讨论】：

snack.expo.io/@pratap2210/usenavigationstate 看到这个。

标签： react-native react-navigation-v5

【解决方案1】：

我正在使用嵌套导航（堆栈 > 抽屉 > 选项卡），我需要在我的自定义抽屉组件中到达当前屏幕，所以我使用这些：

const isKeyExistsOn = (o, k) => k.split(".").reduce((a, c) => a.hasOwnProperty(c) ? a[c] || 1 : false, Object.assign({}, o)) === false ? false : true;

const getScreenNameFromExactRoute = (exactRoute) => {
    var tmp = JSON.parse(JSON.stringify(exactRoute));
    while (true) {
        if (isKeyExistsOn(tmp, "params")) 
            tmp = tmp.params;
        else 
            return tmp.screen;
    }
}

const getCurrentScreen = (props) => {
    var lastscreen = props.state.history.filter(x => x.type === "route");
    lastscreen = lastscreen[(lastscreen.length - 1)];

    var exactRoute = props.state.routes.find(x => x.key === lastscreen.key);
    if (exactRoute.name === "MyTabsDrawerSceneKey") {
        if (!exactRoute.state)) {
            return getScreenNameFromExactRoute(exactRoute);
        } else 
            return getCurrentScreen(exactRoute);
    }
    else
        return exactRoute.name;
}

【讨论】：

【解决方案2】：

使用以下方法监听路由变化。

const Stack = createStackNavigator();
const prevGetStateForActionHomeStack = Stack.router.getStateForAction;

Stack.router.getStateForAction = (action, state) => {

 if (action.type === 'Navigation/NAVIGATE') {
  //Your code here, which will check for current route and process your business logic
 }

return prevGetStateForActionHomeStack(action, state);

}

【讨论】：