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

ne5o7dgx 于 2022-12-04 发布在 React

关注(0)|答案(4)|浏览(385)

使用React导航。我有一个StackNavigator

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

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

react-native

来源：https://stackoverflow.com/questions/49701104/how-to-destroy-a-screen-after-navigating-from-it-in-stacknavigator

4条答案

按热度按时间

sr4lhrrt1#

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

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

赞(0）回复(0）举报 2022-12-04

oprakyz72#

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

实施

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

navigation.dispatch(resetAction);

赞(0）回复(0）举报 2022-12-04

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 ...
}

赞(0）回复(0）举报 2022-12-04

ni65a41a4#

最简单的方法是使用pop（），然后导航到主屏幕

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

赞(0）回复(0）举报 2022-12-04

我来回答

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

4条答案

实施

相关问题

热门标签

最新问答