Как активировать маршрут реакции-навигации-5?

Question

Я использую реагирующую навигацию 5 в своем собственном приложении реакции. В моем приложении у меня есть несколько переключаемых экранов, таких как Auth , Home , Onboarding et c. На домашней странице у меня есть полностью настроенный заголовок и вложенный навигатор. Во вложенном навигаторе у меня 2 экрана Список & Настройки . Я хочу отобразить значок шестеренки в заголовке при отображении экрана Список и значок дома при отображении экрана Настройки . Для этого я хочу имя текущего активного маршрута. Как я могу получить имя активного вложенного маршрута с домашней страницы в реагирующей навигации?

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

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

}