Как очистить весь стек ящиков и выйти из формы приложения React native

Question

В моем приложении у меня есть навигатор основного стека (логин, ящик). И я создал навигатор по ящикам в react native ("@ response-navigation / drawer": "^ 5.1.1"). В каждом ящике тоже есть навигатор по стеку. Итак, как я могу выйти из приложения на этом экране стека ящиков? Я просто использую это (props.navigation.navigate ("Логин")). После перехода к входу в систему, когда пользователь снова нажимает кнопку «Назад», он переходит к предыдущему стеку. Я хочу очистить весь стек и перейти к логину.

Answer 1

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

Сначала я создал другой стек BottomTab:

const BottomTab = () => {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#fff',
        activeBackgroundColor: '#c47808',
        inactiveBackgroundColor: '#ffbd5c',
        inactiveTintColor: '#c47808',
        style: {
          height: Platform.OS == 'ios' ? hp('10.35%') : hp('8.35%'),
        },
        labelStyle: {
          marginBottom: Platform.OS == 'ios' ? 8 : 2,
        },
      }}
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          return getTabBarIcon(route, focused);
        },
      })}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Meetings" component={Meeting} />
      <Tab.Screen name="My Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
};

И затем я интегрировал его в навигатор основного стека как

 <NavigationContainer linking={deepLinking}>
        <Stack.Navigator
          initialRouteName="Login"
          screenOptions={{
            headerShown: false,
            gestureEnabled: false,
          }}>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="SignupEmail" component={SignupEmail} />
          <Stack.Screen name="BottomTab" component={BottomTab} />   
        </Stack.Navigator>
      </NavigationContainer>

И вы можете видеть здесь, внутри он импортирован как нижняя вкладка, а теперь из нижней вкладки, если вы do navigation.navigate ("login") он переходит на эту страницу, и кнопка "Назад" закроет приложение, так как это была моя стартовая страница.

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

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

Вы проверяете do c выше в rn-reset ..

Надеюсь, это поможет. не стесняйтесь сомневаться

Answer 2

Используйте это, чтобы сбросить ваш стек:

import {StackActions, NavigationActions} из 'response-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Login' })],
});
this.props.navigation.dispatch(resetAction);