Как убрать фоновый экран с экрана A другого стека в Screen C другого стека

Question

У меня есть следующий навигатор стека.

Контейнер навигации

const ContentStack = createStackNavigator();

<NavigationContainer>
    <ContentStack.Navigator
      initialRouteName="SceeenAStack"
      headerMode="float"
      screenOptions={{
        header: props => {
          return <CustomHeader {...props} />;
        },
      }}>
          <ContentStack.Screen name="SceeenAStack" component={TabA} />
          <ContentStack.Screen name="ScreenBStack" component={TabB} />
    </ContentStack.Navigator>
</NavigationContainer>

Вложенный стек1

const SceeenAStack = createStackNavigator();

<SceeenAStack.Navigator
      initialRouteName="ScreenA"
      headerMode="none"
      screenOptions={{
        gestureEnabled: true,
      }}>

        <SceeenAStack.Screen
           name="ScreenA"
           component={ScreenA}
        />
        <SceeenAStack.Screen
           name="ScreenB"
           component={ScreenB}
        />

</SceeenAStack.Navigator>

Вложенный стек 2

const ScreenBStack = createStackNavigator();

<ScreenBStack.Navigator
      initialRouteName="ScreenC"
      headerMode="none"
      screenOptions={{
        gestureEnabled: true,
      }}>

        <ScreenBStack.Screen
           name="ScreenA"
           component={ScreenC}
        />
        <ScreenBStack.Screen
           name="ScreenB"
           component={ScreenD}
        />

</ScreenBStack.Navigator>

screen (Тело) screenA имеет вид SceeenAStack отображается в фоновом режиме в ScreenB в SceeenBStack.

Как его удалить?

Вот снимок экрана:

Примечание Значок, появляющийся на заднем плане, не является частью заголовка ScreenA.

Answer 1

Не используйте navigate() или push() в этом случае. Используйте replace()

пример из документов:

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

navigation.dispatch({
  ...StackActions.replace('Profile', {
    user: 'jane',
  }),
  source: route.key,
});