使用React Native Navigation导航到下一个组件时完成当前组件？

Question

我想完全关闭当前组件,同时导航到react-native中的下一个组件.

我正在使用react- navigation在屏幕之间导航.

场景是,我的项目中有两个j,Login.js和Home.js.当用户登录到应用程序时,它会将凭据保存在AsyncStorage中.每次用户进入登录屏幕时,都会检查用户是否已登录.如果用户已登录,则应用程序将直接导航到主页,此操作我想完全关闭登录屏幕.

目前,通过我的实现,登录屏幕仍保留在导航堆栈中.当我从主页按回来时,应该完全关闭应用程序,不应再次使用登录屏幕重新启动.

这是我的StackNavigator代码:

const navigationStack = createStackNavigator(
  {
    Login: {
      screen: LoginScreen
    },
    Home: {
      screen: HomeScreen
    },
  },
); 

用于导航:

this.props.navigation.navigate('Home');

请告诉我我现有代码的错误？

Answer 1

通过修改特定 StackNavigator 路由器的 getStateForAction 方法，无需向每个屏幕添加回处理代码即可实现此目的。

const navigationStack = createStackNavigator(
  {
    Login: {
      screen: LoginScreen
    },
    Home: {
      screen: HomeScreen
    },
  },
); 

可以修改 getStateForAction 方法来实现此目的

const defaultStackGetStateForAction =
  navigationStack.router.getStateForAction;

navigationStack.router.getStateForAction = (action, state) => {
  if(state.index === 0 && action.type === NavigationActions.BACK){
    BackHandler.exitApp();
    return null;
  }

  return defaultStackGetStateForAction(action, state);
};

仅当堆栈中有一个屏幕时，state.index 才变为 0。

您可以通过此Back Handling检查