登录不转到HomeScreen

Question

我的登录不会去HomeScreen，但当我重新加载应用程序时，它会自动去HomeScreen吗？登录功能运行良好，这是目前唯一困扰我的问题，它需要重新加载应用程序才能进入HomeScreen。

下面是我的App、LoadingScreen、LoginScreen和HomeScreen的文件。

App.js

import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SignupScreen from './screens/SignupScreen';
import LoginScreen from './screens/LoginScreen';
import LoadingScreen from './screens/LoadingScreen';
import HomeSceen from './screens/HomeScreen';
import AsyncStorage from '@react-native-community/async-storage';


const App = ({ navigation }) => {
  const [isloggedin, setLogged] = useState(null);
  const detectLogin = async () => {
    const token = await AsyncStorage.getItem('token');
    if (token !== null) {
      setLogged(true);
    } else {
      setLogged(false);
    }
  };
  useEffect(() => {
    detectLogin();
  }, []);

  const StackApp = createStackNavigator();

  return (
    <NavigationContainer>
      <StackApp.Navigator headerMode="none">
        <StackApp.Screen name="loading" component={LoadingScreen} />
        <StackApp.Screen name="home" component={HomeSceen} />
        <StackApp.Screen name="login" component={LoginScreen} />
        <StackApp.Screen name="signup" component={SignupScreen} />
      </StackApp.Navigator>
    </NavigationContainer>
  );
}

export default App;

LoadingScreen.js

import React, { useEffect } from 'react';
import {
  ActivityIndicator,
  View,
  StyleSheet
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

const LoadingScreen = (props) => {

  const detectLogin = async () => {
    const token = await AsyncStorage.getItem('token');
    if (token) {
      props.navigation.replace("home");
    } else {
      props.navigation.replace("login");
    }
  };
  useEffect(() => {
    detectLogin();
  }, []);

  return (
    <View style={styles.loading}>
      <ActivityIndicator size="large" color="#ff0550" />
    </View>
  );
};

const styles = StyleSheet.create({
  loading: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
});

export default LoadingScreen;

LoginScreen.js

import React, { useState } from 'react';
import { Button, TextInput } from 'react-native-paper';
import {
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  KeyboardAvoidingView,
  Alert,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { SafeAreaView } from 'react-native-safe-area-context';


const LoginScreen = (props) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (props) => {
    fetch('http://localhost:3000/api/auth/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        'email': email,
        'password': password,
      }),
    })
      .then(res => res.json())
      .then(async (data) => {
        try {
          const items = [['token', data.token], ['user', data.user._id]];
          AsyncStorage.multiSet(items);
          props.navigation.replace('home');
        } catch (e) {
          console.log('error log', data.error);
          Alert(data.error);
        }
      });
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <KeyboardAvoidingView behavior="position">
        <StatusBar backgroundColor="#ff0550" barStyle="light-content" />
        <View
          style={{
            borderBottomColor: '#ff0550',
            borderBottomWidth: 4,
            borderRadius: 10,
            marginLeft: 20,
            marginRight: 150,
            marginTop: 4,
          }}
        />
        <Text
          style={{
            fontSize: 20, marginLeft: 18, marginTop: 20
          }}

        >Login with email</Text>
        <TextInput
          label='Email'
          autoCapitalize="none"
          mode="outlined"
          value={email}
          style={{ marginLeft: 18, marginRight: 18, marginTop: 18 }}
          theme={{ colors: { primary: '#ff0550' } }}
          onChangeText={(text) => setEmail(text)}

        />
        <TextInput
          label='password'
          autoCapitalize="none"
          mode="outlined"
          secureTextEntry={true}
          value={password}
          onChangeText={(text) => { setPassword(text) }}
          style={{ marginLeft: 18, marginRight: 18, marginTop: 18 }}
          theme={{ colors: { primary: '#ff0550' } }}

        />
        <Button
          mode="contained"
          style={{ marginLeft: 18, marginRight: 18, marginTop: 18, backgroundColor: '#ff0550' }}
          onPress={() => handleLogin(props)}>
          Login
      </Button>
        <TouchableOpacity>
          <Text
            style={{
              fontSize: 18, marginLeft: 18, marginTop: 20
            }}
            onPress={() => props.navigation.replace('signup')}
          >dont have a account ?</Text>
        </TouchableOpacity>

      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};



export default LoginScreen;

HomeScreen.js

import React, { useEffect, useState } from 'react';
import { Button } from 'react-native-paper';
import { Text, View } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

const HomeScreen = (props) => {

  const logout = (props) => {
    let keys = ['user', 'token'];
    AsyncStorage.multiRemove(keys, (error) => {
      props.navigation.replace('login');
    });
  };

  return (
    <View style={{ flex: 1, marginTop: 100 }}>
      <Text style={{ fontSize: 18 }}>your email is sample here!</Text>
      <Button
        mode="contained"
        style={{ marginLeft: 18, marginRight: 18, marginTop: 18, backgroundColor: '#ff0550' }}
        onPress={() => logout(props)}
      >
        logout
      </Button>
    </View>
  );
};

export default HomeScreen;

Answer 1

用户props.navigation.navigate(" homescreen ")此外，您还需要在应用程序js中添加条件，如果已记录，则转到homescreen否则登录页面。从react- Navigator Replace中选中switch Navigator，只需将当前屏幕更改为另一个屏幕，而不是通过屏幕导航。所以它将只停留在屏幕上