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

Question

我想在导航到 中的下一个组件时完全关闭当前组件 react 原生 .

我正在使用 react 导航用于在屏幕之间导航。

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

目前，在我的实现中，登录屏幕仍保留在导航堆栈中。当我从主页按回时，应用程序应该完全关闭，并且不应再次以登录屏幕重新启动。

这是我的 StackNavigator 代码:

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

导航:

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

请让我知道我的现有代码做错了什么？

Answer 1

您可以通过多种方式实现这一点。就像在堆栈导航器上使用替换或重置操作，或者使用开关导航器代替堆栈导航器。

使用重置:(清空堆栈并导航到指定屏幕)

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");

使用切换导航器:(推荐)

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

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