React Native Expo - 根據用戶是否登錄顯示不同的 NavigationContainer

Question

應用程序.js：

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

export default function App() {

  let isLoggedIn = false;

  setInterval(function () {
    auth.onAuthStateChanged((user) => {
       isLoggedIn = user !== null;
    });
  }, 50);

  if (!isLoggedIn) {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="LoginScreen" component={LoginScreen} />
          <Stack.Screen name="StartScreen" component={StartScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  } else if (isLoggedIn) {
    return (
      <>
        <NavigationContainer>
          <Drawer.Navigator initialRouteName="StartScreen">
            <Drawer.Screen name="StartScreen" component={StartScreen} />
            <Drawer.Screen name="LoginScreen" component={LoginScreen} />
          </Drawer.Navigator>
        </NavigationContainer>
      </>
    );
  }
}
const styles = StyleSheet.create({});

AppRegistry.registerComponent("myApp", () => App);

我的目標是僅在用戶登錄時顯示Drawer.Navigator 。我嘗試更新 boolean isLoggedIn以更改返回語句，但它不起作用，盡管 boolean 正在更改值。 關於如何處理這個問題的任何想法？ 提前致謝

Answer 1

重構代碼如下：

//...Other top-level imports
import { ActivityIndictor } from "react-native";

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

export default function App() {
  const [isLoggedIn, setLoggedIn] = React.useState(null);

  const authenticateUser = () => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        setLoggedIn(true);
      } else {
        setLoggenIn(false);
      }
    });
  };

  // Check authentication state when the app launched

  React.useEffect(() => {
    if (!isLoggedIn) {
      authenticateUser();
    }
  }, [isLoggedIn]);

  /** While user is authenticating, show progress indicator*/
  if (isLoggedIn === null) return <ActivityIndicator />;

  return (
    <NavigationContainer>
      {isLoggedIn ? (
        <Drawer.Navigator initialRouteName="StartScreen">
          <Drawer.Screen name="StartScreen" component={StartScreen} />
          <Drawer.Screen name="LoginScreen" component={LoginScreen} />
        </Drawer.Navigator>
      ) : (
        <Stack.Navigator>
          <Stack.Screen name="LoginScreen" component={LoginScreen} />
          <Stack.Screen name="StartScreen" component={StartScreen} />
        </Stack.Navigator>
      )}
    </NavigationContainer>
  );
}
const styles = StyleSheet.create({});

AppRegistry.registerComponent("myApp", () => App);

Answer 2

單擊鏈接https://reactnavigation.org/docs/auth-flow閱讀有關身份驗證流程如何在 React Native 中工作的信息。