2

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

4

2 回答 2

0

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

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;
}
于 2020-04-09T18:49:55.827 回答
-1

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

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

}
于 2020-02-23T16:50:03.263 回答