时间戳

首页 > 解决方案 > 如何防止返回登录屏幕反应式

react-native - 如何防止返回登录屏幕反应式

问题描述

以下是我的登录和索引文件，登录后如果按下返回键，它会返回登录。我是新来的本地人，请告知。我在过去的一周里被困住了。我正在使用博览会开发

登录.js

userLogin = () => {
if(this.state.email === '' && this.state.password === '') {
  Alert.alert('Enter details to signin!')
} else {
  this.setState({
    isLoading: true,
  })
  firebase
  .auth()
  .signInWithEmailAndPassword(this.state.email, this.state.password)
  .then((res) => {
    console.log(res)
    console.log('User logged-in successfully!')
    this.setState({
      isLoading: false,
      email: '', 
      password: ''
    })
    this.props.navigation.navigate('Deqo')
  })
  .catch(error => this.setState({ errorMessage: error.message }))
}
}

这是导航路径。我直接从堆栈导航导航到底部标签导航。

索引.tsx

import { NavigationContainer, DefaultTheme, DarkTheme} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';
import { ColorSchemeName } from 'react-native';


import BottomTabNavigator from './BottomTabNavigator';
import LinkingConfiguration from './LinkingConfiguration';

export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
return (
<NavigationContainer
  linking={LinkingConfiguration}
  theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
  
  <MyStack/>
</NavigationContainer>
);
}

标签： react-nativeauthenticationstackstack-navigatorreact-native-tabnavigator

解决方案

您可以在直接登录后使用 navigation.reset()。.reset() 将清除所有导航历史记录。并将从您可以指定的索引开始一个新的。您还将指定要使用哪个屏幕堆栈启动新的堆栈导航历史记录。这是我的代码片段。 用户直接登录后。我清除历史。并从 mainLayout 开始。因此用户永远无法返回登录屏幕。就像他按下导航到该屏幕的按钮一样：

  React.useEffect(() => {
if (user) {
  navigation.navigate("MainLayout");
  navigation.reset({
    index: 0,
    routes: [{ name: "MainLayout" }],
  });
}
}, [user]);

推荐阅读