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

Answer 2

您可以通过多种方式实现此目的。就像在堆栈导航器上使用替换或重置操作，或使用开关导航器而不是堆栈导航器。

使用重置：（清空堆栈并导航到指定的屏幕）

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

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


this.props.navigation.dispatch(resetAction);

使用替换：（将当前屏幕替换为指定屏幕）

this.props.navigation.replace("Home");

使用Switch Navigator ：（推荐）

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

// Navigate to screen
this.props.navigation.navigate("Home");

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

2 个答案: