在 React Native 中不惜一切代价防止导航回来

Question

这是一个基本的反应本机应用程序

应用程序.js

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

import LoginScreen from './src/screens/LoginScreen';

import HomeScreen from './src/screens/HomeScreen';

const RootStack = createStackNavigator ({

  Login: {

    screen: LoginScreen

  },

  Home: {

    screen: HomeScreen

  },

{

  initialRouteName: 'Login',

  headerMode: 'none',

  defaultNavigationOptions: {

    gesturesEnabled: false,

  },

}

);

const App = new createAppContainer(RootStack);

export default App;

登录屏幕.js

import React from 'react';

import { Text, View, TouchableOpacity } from 'react-native';

export default class KeyScreen extends React.Component {

    render() {

        return (

            <View style={styles.container}>

                <Text>Press the button to login</Text>

                <TouchableOpacity 

                onPress={() => {

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

                }}

                >

                    <Text>Login</Text>

                </TouchableOpacity>

            </View>

        );

    }

}

});

主屏幕

import React, { Component } from 'react';

import { Text, View } from 'react-native';

export default class HomeScreen extends Component {

  render() {

    return (

      <View>

        <Text>You are logged in until the app is deleted!</Text>

      </View>

    );

  }

}

禁用此设置和手势后，您无法从主屏幕返回登录屏幕，但我不确定在重新启动手机或关闭和打开应用程序后您不会被注销。有没有办法确保您按下按钮后无法返回登录屏幕？使用我当前的应用程序设置，返回登录屏幕基本上会将您锁定在应用程序之外，因为数据库中不再有用户的访问密钥

Answer 1

用 createSwitchNavigatorimport { createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';import LoginScreen from './src/screens/LoginScreen';import HomeScreen from './src/screens/HomeScreen';const MainStack = createStackNavigator({&nbsp; Home: { screen: HomeScreen }}, {&nbsp; initialRouteName: 'Home',&nbsp; headerMode: 'none',})const RootSwitch = createSwitchNavigator({&nbsp; Login: { screen: LoginScreen },&nbsp; Main: { screen: MainStack },}, {&nbsp; initialRouteName: 'Login'})const App = new createAppContainer(RootSwitch);export default App;如果您希望用户能够保持登录状态，即使他们重新打开应用程序，请使用AsyncStorage或redux-persist保存您正在使用的内容来检查他们是否已登录。检查componentDidMount的LoginScreen，并导航到Main它是否存在并且有效。