如何在 React Native 上更正我的注销功能？

如何解决如何在 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",SettingsTitle: {
    fontSize: 30,color: "#EEEEEE",marginBottom: 300,SignOutText: {
    fontSize: 20,SignOutBtn: {
    width: "125%",backgroundColor: "#F2A950",borderRadius: 25,height: 40,marginTop: 100,marginBottom: 10,});

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

解决方法

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

使用 AsyncStorage 和 SplashScreen

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

然后像这样编写简单的代码 =>

splashScreen.js

Body

并创建一个用于注销和登录的函数

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;

使用全局状态 (Redux)

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

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

redux 使用示例 =>

您的导航将如下所示

const login = (email,password) => {
  AsyncStorage.setItem('profile',JSON.stringify({email,password}));
  nav.replace('splashScreen');
};
const logout = () => {
  AsyncStorage.removeItem('profile');
  nav.replace('splashScreen');
};

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 最好的做法是让你的应用程序由全局状态处理，但 asyncStorage 也很重要