Question

我想在登录（欢迎）后用户导航到Home。我重置了历史记录，因此用户无法返回：

const actionToDispatch = NavigationActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'Home' })]
        });

        this.props.navigation.dispatch(actionToDispatch);

这很正常。按下注销后，用户应返回欢迎，但它不能正常工作。这就是我在做什么：

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

        this.props.navigation.dispatch(resetAction);

错误表示没有“欢迎”的路线。必须是＆＃39;主要＆＃39;，＆＃39;隐私＆＃39;，＆＃39;条款＆＃39;这是Home中其中一个标签的路线。见下文：

 const AppStack = StackNavigator({
                    Welcome: {
                        screen: Welcome
                    },
                    Home: {
                        screen: Tabs
                    }
                }, {
                        initialRouteName: this.state.isLoggedIn ? 'Home' : 'Welcome',
                        headerMode: 'none'
                    }
                );

export const ProfileStack = StackNavigator({
    Profile: {
        screen: Profile,
    },
});

export const SettingsStack = StackNavigator({
    Settings: {
        screen: Settings,
    },
}, {
    });

export const InfoStack = StackNavigator({
    Main: {
        screen: Main,
    },
    Privacy: {
        screen: Privacy
    },
    Terms: {
        screen: Terms
    }
});

const routeConfiguration = {

    Profile: { screen: ProfileStack },
    Settings: { screen: SettingsStack },
    Info: { screen: InfoStack }
};

const tabBarConfiguration = {
    tabBarOptions: {
        activeTintColor: 'white',
        inactiveTintColor: 'lightgray',
        labelStyle: {
            fontSize: Normalize(10),
            fontFamily: Fonts.book
        },
        style: {
            backgroundColor: Colors.greenLightGradient,
            borderTopWidth: 1,
            borderTopColor: Colors.tabGreenLine
        },
    }
};

export const Tabs = TabNavigator(routeConfiguration, tabBarConfiguration);

Answer 1

我在这里找到了解决方案：https://github.com/react-community/react-navigation/pull/789。

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

this.props.navigation.dispatch(resetAction);

key：null 是重要的一部分。

Answer 2

用您想要重置历史记录的任何屏幕替换主页 (v5)

import { CommonActions } from '@react-navigation/native';
  navigation.dispatch(state => {
 // Remove the home route from the stack
 const routes = state.routes.filter(r => r.name !== 'Home');

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

Answer 3

对于正在寻找React Navigation 3.x and 4.x解决方案的任何人

import {NavigationActions, StackActions} from 'react-navigation';

 const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({routeName: 'Home'})],
      key: null,
    });
    this.props.navigation.dispatch(resetAction);

反应导航自3.x起将重置方法移至StackActions

使用反应导航将导航历史重置为登录屏幕

3 个答案: