如何在 React Native 上更正我的注銷 function？

Question

一段時間以來，我一直在嘗試解決此問題，但一直遇到問題。 在花了一個多星期的時間試圖解決這個問題后，我覺得我在進步，但仍然不是我想要的。 我的目標是使用設置頁面中的“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,
  },
});

任何避免將來犯此類錯誤的建議和技巧都將非常感激！

Answer 1

我正在考慮兩種身份驗證方式

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;

並創建一個 function 用於注銷和登錄

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

2. 使用全球 State ( Redux )

劇透：至少對我來說很難，但我確實了解基本知識。

忘記啟動畫面，您可以在導航中放置全局 state

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 登錄和注銷 function 看起來像這樣

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 讓您的應用程序由全局 state 處理是最佳實踐，但 asyncStorage 也很重要