防止用户返回上一个屏幕 StackNavigator

Question

我想做一个简单的任务：成功登录后将用户重定向到他的主页。为此，我使用 react-navigation 的 StackNavigator：

// App.js

class App extends Component {
  render() {
    return (<RootStack />);
  }
}

const RootStack = createStackNavigator(
  {
    Login: { screen: Login, navigationOptions: { header: null }},
    Home: { screen: Home, navigationOptions: { header: null }}
  },
  {
    initialRouteName: 'Root'
  }
)

如何防止用户在登录后返回登录屏幕？为了防止在android中使用后退按钮，我会使用这个：

// Home.js

import React, { Component} from 'react';
import { ... , BackHandler } from 'react-native';

class Home extends Component {
    constructor(props) {
        super(props);
        BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid);
    }
    onBackButtonPressAndroid = () => {
        return true;
    }
}

但是这样做，我完全禁用了后退按钮。还有其他方法可以实现目标吗？

Answer 1

react native documentation 有一个关于如何进行身份验证流程的出色页面。

您可能还不熟悉 SwitchNavigator。 SwitchNavigator 的目的是一次只显示一个屏幕。默认情况下，它不处理返回操作，并且在您切换离开时将路由重置为默认状态。这正是我们希望从身份验证流程中获得的确切行为：当用户登录时，我们想要丢弃身份验证流程的状态并卸载所有屏幕，而当我们按下硬件返回按钮时，我们希望无法返回身份验证流程。我们使用导航操作在 SwitchNavigator 中的路由之间切换。您可以在API reference. 中阅读有关 SwitchNavigator 的更多信息

根据文档，这个SwitchNavigator是这样实现的：

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

因此，为了实现您的目标，您需要将您的 RootStack 更改为以下内容（注意我尚未测试此代码）：

const RootStack = createSwitchNavigator(
  {
    Loading: ,//put your loading screen here
    Auth: { screen: Login, navigationOptions: { header: null }},
    App: { screen: Home, navigationOptions: { header: null }}
  },
  {
    initialRouteName: 'Loading'
  }
)

然后，在您的加载屏幕中，您将获取所需的任何状态以确定用户是否已登录，您可以调用 this.props.navigation.navigate('App'); 跳过登录屏幕并将用户直接带到您的应用程序，或者 @ 987654328@ 将您的用户发送到登录页面。 SwitchNavigator 会自动为您处理禁用返回导航。