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

Question

这是一个基本的反应本机应用程序应用程序.jsimport { 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;登录屏幕.jsimport 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

用 createSwitchNavigator

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

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

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

const MainStack = createStackNavigator({

  Home: { screen: HomeScreen }

}, {

  initialRouteName: 'Home',

  headerMode: 'none',

})

const RootSwitch = createSwitchNavigator({

  Login: { screen: LoginScreen },

  Main: { screen: MainStack },

}, {

  initialRouteName: 'Login'

})

const App = new createAppContainer(RootSwitch);

export default App;

如果您希望用户能够保持登录状态，即使他们重新打开应用程序，请使用AsyncStorage或redux-persist保存您正在使用的内容来检查他们是否已登录。检查componentDidMount的LoginScreen，并导航到Main它是否存在并且有效。