Как сбросить стеки при изменении вкладки внутри bottomTabNavigayor?

Закуска

У меня есть bottomTabNavigator на моей вкладке, и внутри каждой вкладки у меня есть стеки. Я хочу сбрасывать стек каждый раз, когда нажимаю на другую вкладку.

Вкладка Navigator-

Вкладка 1 - | _Stack Navigator

     - Screen 1

     - Screen 2

Вкладка 2 - | _Stack Navigator

     - Screen 3

     - Screen 4

Вкладка 3 - | _Stack Navigator

     - Screen 5
     - Screen 6

Настоящий сценарий,. Предположим, я нахожусь на вкладке 1 - я перехожу на экран 2 с экрана 1. Затем я перехожу на вкладку 2. Теперь, если я снова нажму на вкладку 1, вместо экрана 1 отобразится экран 2.

Аналогичная вещь происходит на каждой вкладке.

Я хочу сбрасывать вкладку при каждом нажатии вкладки.

Пожалуйста помоги.

Я использую -

зависимости: {@ response-native-community / cli: ^ 4.1.0, @ response-native-community / masked-view: ^ 0.1.6, @ response-navigation / bottom-tabs: ^ 5.0.5, @ response- навигация / native: ^ 5.0.5, @ response-navigation / stack: ^ 5.0.5, react: 16.9.0, react-native: 0.61.5, response-native-gesture-handler: ^ 1.6.0, react- native-gifted-chat: ^ 0.13.0, react-native-reanimated: ^ 1.7.0, response-native-safe-area-context: ^ 0.7.3, react-native-screen: ^ 2.0.0-beta. 7,},


react-native react-navigation react-navigation-bottom-tab react-navigation-v5 react-navigation-stack
person Supriya Gorai    schedule 07.04.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Обновите последнюю версию response-navigation и ее зависимостей и используйте это решение, это сработало для меня.

<AppTabs.Screen
  name="TabScreen1"
  listeners={({ navigation }) => ({
    tabPress: () => {
      navigation.navigate('Main1', { screen: 'Main2' });
    },
  })}
/>
person Supriya Gorai    schedule 07.04.2020

arrow_upward
0
arrow_downward

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

Возможное решение должно быть

navigationOptions: ({ navigation }) => ({
  tabBarOnPress: ({ scene, jumpToIndex }) => {
    const { route, focused, index } = scene;
    if (focused) {
      if (route.index > 0) {
        const { routeName, key } = route.routes[1]
        navigation.dispatch(NavigationActions.back({ key }))
      }
    } else {
      jumpToIndex(index);
    }
  },
});

Возможно, вам потребуется обновить этот код для версии v5. (То же самое касается решений ниже)

Дополнительные решения можно найти здесь

person Victor    schedule 07.04.2020

arrow_upward
0
arrow_downward

Если вы используете навигацию версии 4 или ниже, у меня есть очень простой способ сделать это.

 tabBarOnPress:({ navigation }) => {
      navigation.navigate(HomeStack,{screen:navigation.state.routes[0].routeName});
       navigation.popToTop();
    },
person Harsh Vaid    schedule 26.05.2021