React Native 如何在StackNavigator中从屏幕导航后销毁该屏幕

ne5o7dgx  于 2022-12-04  发布在  React
关注(0)|答案(4)|浏览(376)

使用React导航。我有一个StackNavigator

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

第一个屏幕是一个实体列表,第二个屏幕是创建一个将添加到列表中的新实体。第一个列表屏幕在导航栏中有一个指向“添加实体”的链接,该链接指向“创建”路径。创建实体后,我使用导航。导航返回到“列表”路径。这会将创建实体屏幕留在堆栈中,然后在列表屏幕的导航栏中会出现一个后退按钮。我不希望在成功创建实体后,创建实体屏幕仍留在堆栈中--我希望它被销毁,这样创建屏幕就不会堆积在一个我不需要的堆栈中,这样我就不会在列表屏幕上有一个我不想要的后退按钮。我想过使用一个StackNavigator,但那不会给予你一个很好的顶部导航栏(在iOS中)。有什么建议吗?

sr4lhrrt

sr4lhrrt1#

我有一个问题非常类似于你的,经过几天的搜索,我能够解决我的问题,添加一行代码,这在我的情况下破坏屏幕,只要它离开它。
将以下内容添加到drawerNavigator的属性中:unmountInactiveRoutes: true
下面是我的代码示例:

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

oprakyz72#

我在导航操作中使用了重置操作,根据@ Priish Vaidya对我最初问题的评论。

实施

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

navigation.dispatch(resetAction);
nhn9ugyo

nhn9ugyo3#

https://reactnavigation.org/docs/navigation-actions#reset
根据上面的回答,我认为以下方法很有效:

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

const SplashScreen = () => {
  const isFocused = useIsFocused();
  const navigation = useNavigation();

  ...

  useEffect(() => {
    if (!isFocused) {
      navigation.dispatch(state => {
        const routes = state.routes.filter(item => item.name !== 'SplashScreen');

        return CommonActions.reset({ ...state, routes, index: routes.length - 1 });
      });
    }
  }, [isFocused, navigation]);

  ...

  return ...
}
ni65a41a

ni65a41a4#

最简单的方法是使用pop(),然后导航到主屏幕

navigation.pop();
navigation.navigate('List')

相关问题