如何删除来自另一个堆栈的屏幕C中另一个堆栈的屏幕A的背景屏幕

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>

SceeenAStack的screenA的屏幕（正文）在SceeenBStack的ScreenB中显示在背景中。

如何删除它？

这是屏幕截图：

请注意，背景中出现的图标不是ScreenA标头的一部分。

Answer 1

在这种情况下，请勿使用navigate()或push()。使用replace()

文档示例：

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

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