在 StackNavigator 中导航后如何销毁屏幕

Question

使用反应导航。我有一个 StackNavigator

const Stack = StackNavigator( // eslint-disable-line new-cap
    {
      List: {
        screen: DrugPage,
      },
      Create: {
        screen: DrugCreate,
      },
    },
    {
      initialRouteName: 'List',
    }
  );

第一个屏幕是实体列表，第二个屏幕是创建将添加到列表中的新实体。第一个列表屏幕在导航栏中有一个指向“添加实体”的很好的链接，该链接转到“创建”路线。创建实体后，我使用 navigation.navigate 返回到 List 路由。这会将创建实体屏幕留在堆栈上，然后我的列表屏幕上的导航栏中会出现一个后退按钮。在成功创建实体后，我不希望“创建实体”屏幕保留在堆栈中——我希望它被销毁，因此“创建”屏幕不会堆积在我不需要的堆栈中，因此我没有列表屏幕上我不想要的后退按钮。我想过使用 StackNavigator 但这并没有给你一个漂亮的顶部导航栏（在 iOS 中）。有什么建议吗？

Answer 1

我遇到了与您非常相似的问题，经过几天的搜索，我能够通过添加一行代码来解决我的问题，在我的情况下，它会在屏幕离开后立即破坏屏幕。

将此添加到 drawerNavigator 的属性中： unmountInactiveRoutes: true

遵循我的代码示例：

const drawMenu = createDrawerNavigator({
   StackHome,
   StackOS
},{
   unmountInactiveRoutes: true,
   initialRouteName: 'StackHome'
  }
);

Answer 2

我根据 @Pritish Vaidya 对我原来问题的评论，在 NavigationActions 中使用了重置操作。（https://reactnavigation.org/docs/navigation-actions#reset）

执行

const resetAction = NavigationActions.reset({
          index: 0,
          actions: [NavigationActions.navigate({routeName: 'List'})],
          key: null,
        });

navigation.dispatch(resetAction);