reactjs - 当我导航到其他屏幕并快速重新导航到同一屏幕时，屏幕安装两次

Question

我在导航生命周期中遇到问题，当我从屏幕导航到另一个屏幕时，最后一个不会保持焦点并快速重新导航到前一个屏幕。请如果有人可以帮助我。

这是我的 AuthStack.tsx 文件：

import React, { useState, useEffect, useContext } from 'react'
import { createStackNavigator } from "@react-navigation/stack";
import { Text, Button } from 'react-native';
import { Center } from './Center';
import { AuthParamList, AuthNavProps } from "./AuthParamList.ts";
import { AuthContext } from "./AuthProvider";
import { SplashScreen } from "./splashes/SplashScreen";
import {LoginScreen} from './authentificationScreens/LoginScreen'
import {RegisterScreen} from './authentificationScreens/RegisterScreen'

interface AuthStackProps {

}
const Stack = createStackNavigator<AuthParamList>();


export const AuthStack: React.FC<AuthStackProps> = ({}) => {
        return (
            <Stack.Navigator 
                screenOptions={{
                    header: () =>  {null}
                }} 
                initialRouteName="SplashScreen" 
                >
                    <Stack.Screen 
                        options={{ headerShown: false }}
                        name='SplashScreen' 
                        component={SplashScreen}
                    />
                    <Stack.Screen 
                        name='LoginScreen' 
                        component={LoginScreen}
                    />
                    <Stack.Screen                   
                        name='RegisterScreen'
                        component={RegisterScreen}
                    />  
                </Stack.Navigator>
        );
}

这是登录屏幕：

import React, { useState, useContext, useEffect } from 'react'
import { View, Text, ScrollView, ImageBackground , Dimensions, StyleSheet, Pressable } from 'react-native';
import { Input, ListItem, CheckBox, Button, Switch } from 'react-native-elements';
import { LinearGradient } from 'expo-linear-gradient';
import { AuthParamList, AuthNavProps } from "../AuthParamList.ts";
import { AuthContext } from "../AuthProvider";
import Ionicons from 'react-native-vector-icons/Ionicons';
import * as Animatable from 'react-native-animatable';
import { EventRegister } from "react-native-event-listeners";
import BgGigaFit from "../../assets/background.jpg";
import GigaFitLogo from '../../assets/GigaFitLogo1.png'



interface LoginScreenProps {}

export const LoginScreen: React.FC<LoginScreenProps> = ({ navigation, route }: AuthNavProps<"LoginScreen">) => {
    const {login} = useContext(AuthContext);
    const [darkMode, setDarkMode] = useState(false);



    return (
      <ScrollView 
      style={{flex: 1, backgroundColor: 'darkgray'}}
      showsVerticalScrollIndicator={false}
      >
        <ImageBackground
          source={BgGigaFit}
          style={{
            height: Dimensions.get('window').height / 2.5,

          }}
        >
            {/* <View style={styles.SwitchDarkTheme}>
                <ListItem style={styles.SwitchDarkTheme}>
                  <Switch value={false} color="#52c234"/>
                </ListItem>
            </View> */}
            <View style={styles.brandView}>
                
              {/* <Icon type="FontAwesome" name="home"  style={{color: '#ffffff', fontSize: 100}} /> */}
              <Ionicons name="md-barbell-outline" size={50} color="#52c234" />
              <Animatable.Image 
                animation="fadeIn"
                duration= {4000}
                source={GigaFitLogo}
                style={styles.logo}
                resizeMode="stretch"
            />
            </View>
        </ImageBackground>
        {/*Bottom View*/}
        <View style={styles.bottomView}>
            {/*Welcome View */}
            {/* <View style={styles.SwitchDarkTheme}>
                <ListItem>
                  <Switch value={darkMode} color="#52c234"
                      onValueChange= {(val) => {
                        setDarkMode(val);
                        EventRegister.emit('changeThemeEvent', val)
                      }}
                  />
                </ListItem>
            </View> */}
            <View style={{padding: 40}}>
                <Text style={{color: '#52c234', fontSize: 34}}>Welcome</Text>
                <Text>Don't have an account yet !!!
                    <Text onPress={()=> navigation.navigate('RegisterScreen')} style={{color: '#52c234', fontStyle: 'italic'}}>Register Now</Text>
                </Text>
                {/**Form Inputs View */}
                <View style={{marginTop: 50}}>
                    <Input
                    placeholder="Email"
                    rightIcon={<Ionicons name="md-checkmark-done-sharp" size={20} color="#52c234" />}
                    />
                    <Input
                    placeholder="Password"
                    rightIcon={<Ionicons name="ios-eye" size={20} color="#52c234" />}
                    />
    
                    {/**Forgot Password and create new view */}
                    <View style={styles.forgotPasswordView}>
                        <View style={{flex: 1, marginTop:-10, marginLeft: -30}}>
                            <ListItem noBorder>
                              <CheckBox checked={true} checkedColor="#52c234"/>
                              <ListItem.Content style={{marginLeft: -35}}>
                                <Text style={{color: "#52c234"}}>
                                    Remember Me
                                </Text>
                              </ListItem.Content>
                            </ListItem>
                        </View>
                        <View style={{flex: 1, marginTop:-3, marginRight: -150}}>
                            <ListItem noBorder>
                              <ListItem.Content style={{marginLeft: -40}}>
                                <Text style={{color: "#52c234"}}>
                                    Forgot Password
                                </Text>
                              </ListItem.Content>
                            </ListItem>
                            
                        </View>
                        
                    </View>
                    {/**Login Button */}
                            <View style={{height: 100, justifyContent: 'center', alignItems: 'center'}}>
                                {/* <Button type="Solid" rounded buttonStyle={styles.loginButton}>
                                    <Text style={{color: "#ffffff"}}>Login</Text>
                                </Button> */}
                                <Button
                                    icon={
                                      <Ionicons name="md-checkmark-circle-outline" size={20} color="#ffffff" />
                                    }
                                    // title="Login"
                                    type="Outline"
                                    buttonStyle={styles.loginButton}
                                    onPress={() => login()}
                                  />
                            </View>
                </View>
            </View>
        </View>

      </ScrollView>
    );
}

这是注册屏幕：

import React, { useContext, useEffect } from 'react'
import { AuthParamList, AuthNavProps } from "../AuthParamList.ts";
import { Center } from './../Center';
import { Text, Button } from 'react-native';

interface RegisterScreenProps {}

export const RegisterScreen: React.FC<RegisterScreenProps> = ({ navigation, route }: AuthNavProps<"RegisterScreen">) => {


  //   useEffect(() => {
  //     const unsubscribe = navigation.addListener('focus', () => {
  //      --------------------------------------
  //   });

  //   return unsubscribe;
  // }, [navigation]);

    return (
      <Center>
          <Text>I am a Register Screen</Text>
          <Button title="go to login" onPress={() => {
            navigation.navigate('LoginScreen');
            // navigation.goBack()
           }} />
      </Center>
    );
}

我的问题是当我从登录屏幕导航到注册屏幕时，它只显示片刻，然后快速重新导航到登录屏幕。

标签： reactjstypescriptreact-nativereact-navigationreact-lifecycle