Как вернуться на предыдущий экран из React StackNavigator для конкретной вкладки

Question

Я использую React StackNavigator, структура которого выглядит следующим образом:

-----BottomNavigator
-------TabNavigator (has 3 screens)
---------StackNavigator

, поэтому я хочу вернуться к предыдущему экрану из stackNavigator в TabNavigator (экран 2).

Вот мой коддля TabNavigator:

const ServiceTabNavigator = createMaterialTopTabNavigator(
  {
    screenone: screenone,
    screentwo: screentwo,
    screenthree: screenthree
  },
  {
    tabBarOptions: {
      activeTintColor: "#1B5357",
      inactiveTintColor: "gray",
      style: {
        backgroundColor: "#fff",
        color: "#1B5357"
      },
      indicatorStyle: {
        backgroundColor: "#1e90ff"
      }
    },
    navigationOptions: {
      tabBarLabel: "ESTH",
      tabBarIcon: ({ tintColor }) => (
        <Icon name="bars" color={tintColor} size={24} />
      )
    }
  }
);

Вот для StackNavigator, который имеет такой код, но он не идет на screen2 вместо screen1 tabNavigator.

static navigationOptions = ({ navigation }) => ({
    title: "Request Service",
    headerLeft: (
      <TouchableOpacity
        onPress={() => {
          () =>
            navigation.dispatch(
              NavigationActions.reset({
                index: 0,
                actions: [
                  NavigationActions.navigate({ routeName: "MainNavigator" }) //MainNavigator is bottomNavigator
                ]
              })
            );
          navigation.navigate("screentwo");
        }}
      >
         <Icon
            name="times"
            type="font-awesome"
            iconStyle={{ color: "#000" }}
            containerStyle={{ marginLeft: 16 }}
          />
      </TouchableOpacity>
    ),
    headerTitleStyle: {
      color:'#00CA9D',
      fontWeight: 'bold',
    },
    headerStyle: { borderBottomWidth:0 }

  });

Спасибо

Answer 1

ОК, после вскрытия я нашел способ

Реагировать NavigationV2 Way:

 navigation.navigate('MainNavigator', {}, NavigationActions.navigate({ routeName: 'Requests' }))

Реагировать NavigationV3 Way:

navigation.navigate(NavigationActions.navigate({
       routeName: 'MainNavigator',
       action: NavigationActions.navigate({ routeName: 'Requests' })
      }))

BottomNavigator в качестве MainNavigatorScreentwo as Requests

В двух словах навигация. Navigate () имеет третий параметр, который действует как вторая навигация.

Итак, сначала перейдите к MainNavigator ------, а затем ---->Screen2 в TabNavigator

Спасибо Дэвиду проверить этот пост.Надеюсь, что это поможет кому-то еще в будущем.

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

Answer 2

Из того, как вы описали иерархию навигации, похоже, что ваш корневой навигатор всегда Main / BottomNavigator, так почему вы вызываете диспетчерский сброс перед переходом к screentwo?

Похоже, проблема может заключаться в том, что действие сброса не завершено до того, как вы попытаетесь перейти к screentwo, поэтому вы в конечном итоге набираете initialRoute из MainNavigator.

Таким образом, вызывается только navigation.navigate("screentwo") (безсброс корня) должен сделать то, что вы хотите достичь.

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

const navigateAction = NavigationActions.navigate({
   routeName: route,
   params: params
})
navigation.dispatch(navigateAction)

Answer 3

Я использую реагирующий навигатор .. для этого есть свойство с именем jumpToIndex.Я решил это так для моих нужд, чтобы открыть модал вместо того, чтобы перейти к данной вкладке.Может быть, вы можете изменить в соответствии с вашими потребностями:

<TabBarBottom
      {...props}
      jumpToIndex={(index) => {
        if (index === 5) {
          // This is the MORE-Tab-Button. Don't  switch to tab, but open the Modal
          props.navigation.navigate('Menu_Screen');
        } else {
          jumpToIndex(index);
        }
      }}
    />