时间戳

首页 > 解决方案 > 如何更正 React Native 上的注销功能？

javascript - 如何更正 React Native 上的注销功能？

问题描述

一段时间以来，我一直在尝试解决此问题，但一直遇到问题。在花了一个多星期的时间试图解决这个问题后，我觉得我在进步，但仍然不是我想要的。我的目标是使用设置页面中的“SignOutBtn”按钮从应用程序中注销。我的解决方案是将 App.JS 中的应用状态“loggedIn：true”更改为“loggedIn：false”。有人可以花时间查看我的代码并帮助我解决问题吗？

应用页面

export default class App extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      loaded: true,
      loggedIn: true,
    }
    this.logout = this.logout.bind(this)
  }

  logout() {
    this.setState({
      loggedIn: false,
    })
    
  }

  render() {
    const { loggedIn, loaded } = this.state;
    if (!loaded) {
      useEffect(() => {
        createInstallation = async () => {
          const  Installation = Parse.Object.extend(Parse.Installation);
          const  installation = new  Installation();
            
          installation.set('deviceType', Platform.OS);
          await  installation.save();
        };
        
        createInstallation();
      }, []);
      return (
        <View>
          <Text style={styles.container}>Loading...</Text>
        </View>
      );
    }

    if (!loggedIn) {
      return (
        <NavigationContainer>
          <Stack.Navigator initailRouteName="LoginScreen">
            <Stack.Screen
              name="LogIn"
              component={LoginScreen}
              options={{ headerShown: false }}
            />
            <Stack.Screen name="Register" component={RegisterScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      );
    }

    return (
      <NavigationContainer>
        <Stack.Navigator initailRouteName="Main">
          <Stack.Screen
            name="Main"
            component={MainScreen}
            options={{ headerShown: false }}
          />
          <Stack.Screen name="Explore" component={ExploreScreen} />
          <Stack.Screen name="Setting" 
            component={SettingScreen} 
            logout = {this.logout} 
          
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

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

设置页面：

export default class Setting extends React.Component {
  constructor(props) {
    super(props);
    this.signOut =  this.signOut.bind(this);
  }

  signOut(){
    this.props.logout;
    console.log("onPress");
  }
  
  render(){
    return (
      <View style={styles.container}>
        <Text style={styles.SettingsTitle}>Settings page</Text>
          <TouchableOpacity
            style={styles.SignOutBtn}
            onPress={() => this.signOut() }
          >
          <Text style={styles.SignOutText}>Sign Out</Text>
          </TouchableOpacity>
      </View>
    )
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#212121",
    alignItems: "center",
    justifyContent: "center",
  },
  SettingsTitle: {
    fontSize: 30,
    color: "#EEEEEE",
    marginBottom: 300,
    alignItems: "center",
    justifyContent: "center",
  },
  SignOutText: {
    fontSize: 20,
    color: "#EEEEEE",
  },
  SignOutBtn: {
    width: "125%",
    backgroundColor: "#F2A950",
    borderRadius: 25,
    height: 40,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 100,
    marginBottom: 10,
  },
});

任何避免将来犯此类错误的建议和技巧都将非常感激！

标签： javascriptreact-native

解决方案

我正在考虑两种身份验证方式

  1. 使用AsyncStorage和 SplashScreen

将启动画面设置为导航器中的默认屏幕。

然后制作像这样的简单代码=>

飞溅屏幕.js

import React, {useEffect} from 'react';
import {ActivityIndicator, Text, View} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {useNavigation} from '@react-navigation/native';

const index = () => {
  const nav = useNavigation();
  useEffect(() => {
    AsyncStorage.getItem('profile').then((data) => {
      if (data) {
        nav.replace('home');
      } else {
        nav.replace('login');
      }
    });
  }, []);
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <ActivityIndicator size="large" animating />
    </View>
  );
};
export default index;

并为注销和登录创建一个功能

const login = (email, password) => {
  AsyncStorage.setItem('profile', JSON.stringify({email, password}));
  nav.replace('splashScreen');
};
const logout = () => {
  AsyncStorage.removeItem('profile');
  nav.replace('splashScreen');
};
  1. 使用全局状态 ( Redux )

剧透：至少对我来说很难，但我确实了解基本知识。

忘记启动画面，您可以在导航中放置全局状态

redux 使用示例 =>

您的导航将如下所示

const isLogin = useSelector((state) => state.auth.isLogin); 
...
 <Stack.Navigator initailRouteName="Main">
    {isLogin?(
      //put all login screen here
      <Stack.Screen
        name="Main"
        component={MainScreen}
        options={{ headerShown: false }}
      />):(
       <Stack.Screen
          name="LogIn"
          component={LoginScreen}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Register" component={RegisterScreen} />
    )
    </Stack.Navigator>

redux 登录和注销功能如下所示

const login ()=>{
dispatch(authAction({email:"email@email.com",password:"password",isLogin:true}));
//no need to navigate because u are already using a global state in the navigation
}
const logout () =>{
dispatch(authAction({isLogin:false}))
}

祝你好运。我个人喜欢 redux，让您的应用程序由全局状态处理是最佳实践，但 asyncStorage 也很重要

推荐阅读