Реагируйте Навигация 2: Как проверить предыдущую сцену и отключить изменение вкладки

Question

У меня есть вкладка навигации. Одна из моих вкладок имеет форму, и я хотел бы отключить событие навигации, если данные формы не сохранены.

В версии 1 метод tabBarOnPress обеспечивает previousScene, scene и jumpToIndex, поэтому я смог проверить, из какой сцены я ухожу, и получить доступ к ее реквизитам.

Теперь в версии 2 метод tabBarOnPress предоставляет navigation реквизиты для сцены, но отсутствует реквизит предыдущей сцены: /

navigationOptions: {
    tabBarOnPress: ({ navigation, defaultHandler }) => {
        // Check the previous screen
        // If I am leaving the home screen and the user has unsaved data
        // disable tab navigation
        // else change to the pressed tab
    },
},

Кроме того, я попытался использовать прослушиватели событий навигации, но действие NAVIGATE уже отправлено:

props.navigation.addListener('willBlur', () => {
    // Disable tab switching;
}),

Простая закуска: https://snack.expo.io/@hristoeftimov/handle-tab-changes-in-react-navigation-v2

Какие-либо решения, как отключить переключение вкладок, прежде чем покинуть вкладку?

Answer 1

Я нашел гораздо более простой способ, используя getStateForAction.

const defaultGetStateForAction = MainStack.router.getStateForAction;
MainStack.router.getStateForAction = (action, state) => {
    if (!state) {
        return defaultGetStateForAction(action, state);
    }

    if (
        action.type === NavigationActions.NAVIGATE
        && state.routes[state.index].key === 'HomeTab'
    ) {
        const tab = state.routes[state.index];
        const currentRoute = tab.routes[tab.index];
        const currentRouteParams = currentRoute.params;

        if (currentRouteParams && currentRouteParams.isNavigationDisabled) {
            return currentRouteParams.showConfirmationDialog(action);
        }
    }

    return defaultGetStateForAction(action, state);
}

Каждый раз, когда я переключаюсь между вкладками, он переходит в getStateForAction, где я могу получить доступ к вкладке выхода (из state) и следующий экран (из action).

Итак, когда мое действие NAVIGATE и выходящий экран / маршрут HoneTab, я могу изменить / отключить состояние по умолчанию для действия идля запуска showConfirmationDialog() - это функция, которую я могу установить в качестве параметра маршрута для моего экрана HomeTab.

Answer 2

Объект navigation содержит необходимые данные, так как он содержит состояние навигации до перехода на новую вкладку.Это состояние навигации имеет как экран, с которого вы осуществляете навигацию, так и его параметры.

Чтобы получить состояние, вы можете использовать следующую функцию:

function getCurrentRoute(navState) {
  if (!navState) {
    return null;
  }
  const route = navState.routes[navState.index];

  if (route.routes) {
    return getCurrentRoute(route); // nested routes
  } else {
    return {
      name: route.routeName,
      params: { ...route.params }
    };
  }
}

Так что теперь вы можете использоватьэта функция внутри обработчика onPress.Примерно так:

navigationOptions: {
    tabBarOnPress: ({ navigation, defaultHandler }) => {
        const currentRoute = getCurrentRoute(navigation.state);
        if (currentRoute.name !== 'Home' || !currentRoute.params.isNavigationDisabled) {
            defaultHandler();
        }
    }
}

Конечно, это означает, что вам нужно управлять параметром навигации с именем isNavigationDisabled на главном экране, используя метод this.props.navigation.setParams.

Также,Я надеюсь, что я правильно с отображаемым именем, если не просто отладить его.