React-Navigation with redux - кнопка "Назад" в StackNavigator, вложенная в TabNavigator, запускает действие назад в обоих навигаторах

У меня есть система навигации для реагирования с сокращением. Мое приложение состоит из родительского TabBarNavigator с экраном входа и содержимого. Экран содержимого сам по себе представляет собой Stack Navigator, который содержит главный навигатор для приложения. Все остальные аспекты редукторов и навигаторов работают так, как ожидалось, но кнопка возврата по умолчанию в StackNavigator также запускает родительский TabBarNavigator для возврата.

Является ли это ожидаемым поведением? Я замечаю, что если я определяю headerLeft в navigationOptions, как это, он работает как ожидалось:

static navigationOptions = ({ navigation }) => {
    return {
      headerLeft: (
        <Button transparent onPress={() => { navigation.goBack(); }}><Text>Back</Text></Button>
      )
    };
  };

Кто-нибудь объясняет, что это за причина? Есть ли способ заставить кнопку backNavigator по умолчанию работать с сокращением?

Ответы

Ответ 1

Возможно, отправка действия будет работать лучше:

    onPress={() => {
      navigation.dispatch(NavigationActions.navigate({
        routeName: '<screen name here>'
      }));
    }}

Ответ 2

Вы можете сделать что-то в событии onPress, перед вызовом goBack() вам нужно отправить свое действие для этого конкретного сокращения:

static navigationOptions = ({ navigation }) => {
return {
  headerLeft: (
    <Button 
        transparent 
        onPress={() => { 
          <ACTION_DISPATCH>
          navigation.goBack(); 
        }}>
        <Text>Back</Text>
   </Button>
  )
};};

Ответ 3

В моем случае проблема была немного сложнее, потому что я использую интерактивную навигацию Redux Integration.

Мое обратное действие - это хорошая передача "назад", но в моем редукторе я пропустил второй параметр метода getStateForAction (состояние).

getStateForAction (действие, состояние)

https://reactnavigation.org/docs/routers/api#getStateForAction-action-state

Итак, в моем навигационном редуксе он работает с этим редуктором:

export const back = (state) => AppNavigator.router.getStateForAction(NavigationActions.back(), state)

При этом обратном действии задняя часть вложенного навигатора не переиздает главный навигатор.