阻止用户返回上一个屏幕StackNavigator [英] Prevent user from returning to previous screen StackNavigator

查看:50
本文介绍了阻止用户返回上一个屏幕StackNavigator的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想做一个简单的任务:成功登录后,将用户重定向到他的主页。为此,我使用了反应导航的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;
    }
}

但是通过这种方式,我完全禁用了后退按钮。有没有其他方法可以实现这个目标?

推荐答案

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');跳过登录屏幕并将用户直接带到您的应用程序,或者调用this.props.navigation.navigate('Auth');将您的用户发送到登录页面。SwitchNavigator会自动为您处理禁用后向导航。

这篇关于阻止用户返回上一个屏幕StackNavigator的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆