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

user props.navigation.navigate（“主屏幕”）另外，如果登录，则需要在应用js中添加条件，然后转到主屏幕，否则登录页面。从反应导航中也检查开关导航器替换只是将当前屏幕更改为另一个屏幕，而不是浏览屏幕。因此它将仅停留在该屏幕上

登录不进入主屏幕

1 个答案: