React Native：实现登录与主页导航及退出登录功能求助

核心问题分析 #

1. 原代码中isLogged是常量，无法动态切换登录状态
2. 登录按钮未实现跳转逻辑
3. 缺少退出登录的触发入口

重构后的代码实现 #

1. App.js（状态管理与路由切换）

import React, { useState } from "react";
import { NavigationContainer } from "@react-navigation/native";

import DrawerNavigator from "./navigation/DrawerNavigator";
import Login from "./screens/Login";

const App = () => {
  // 初始未登录，默认显示登录页
  const [isLogged, setIsLogged] = useState(false);

  // 登录成功：切换为已登录状态
  const handleLogin = () => {
    setIsLogged(true);
  };

  // 退出登录：切换为未登录状态
  const handleLogout = () => {
    setIsLogged(false);
  };

  return (
    <NavigationContainer>
      {isLogged ? (
        <DrawerNavigator onLogout={handleLogout} />
      ) : (
        <Login onLogin={handleLogin} />
      )}
    </NavigationContainer>
  );
};

export default App;

2. Login.js（登录按钮触发回调）

import React from "react";
import { View, StyleSheet, Text, Button } from "react-native";

// 接收父组件传递的登录回调
const Login = ({ onLogin }) => {
  return (
    <View style={styles.center}>
      <Text>This is the Login screen</Text>
      <Button
        title="Login"
        onPress={onLogin} // 点击触发登录状态更新
      />
    </View>
  );
};

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

export default Login;

3. DrawerNavigator.jsx（添加退出登录按钮）

import React from "react";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { Button } from "react-native";

import { ProfileStackNavigator } from "./StackNavigator";
import TabNavigator from "./TabNavigator";

const Drawer = createDrawerNavigator();

// 接收退出登录回调
const DrawerNavigator = ({ onLogout }) => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen 
        name="HomeDrawer" 
        component={TabNavigator}
        options={{
          // 在首页抽屉页面的头部添加退出按钮
          headerRight: () => (
            <Button
              title="退出登录"
              onPress={onLogout}
              color="white"
            />
          )
        }}
      />
      <Drawer.Screen 
        name="ProfileDrawer" 
        // 将退出回调传递给Profile栈导航
        children={() => <ProfileStackNavigator onLogout={onLogout} />}
      />
    </Drawer.Navigator>
  );
};

export default DrawerNavigator;

4. StackNavigator.js（Profile页面添加退出按钮）

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { Button } from "react-native";

import Home from "../screens/Home";
import About from "../screens/About";
import Profile from "../screens/Profile";

const Stack = createStackNavigator();

const screenOptionStyle = {
  headerStyle: {
    backgroundColor: "#9AC4F8",
  },
  headerTintColor: "white",
  headerBackTitle: "Back",
};

const MainStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle} initialRouteName="HomeStack">
      <Stack.Screen name="HomeStack" component={Home} />
      <Stack.Screen name="AboutStack" component={About} />
    </Stack.Navigator>
  );
};

// 接收退出登录回调，添加到Profile页面头部
const ProfileStackNavigator = ({ onLogout }) => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle} initialRouteName="ProfileStack">
      <Stack.Screen 
        name="ProfileStack" 
        component={Profile}
        options={{
          headerRight: () => (
            <Button
              title="退出登录"
              onPress={onLogout}
              color="white"
            />
          )
        }}
      />
    </Stack.Navigator>
  );
};

export { MainStackNavigator, ProfileStackNavigator };

关键修改说明 #

• 状态驱动UI：使用React的useState管理登录状态，状态变化时自动切换路由组件，这是React组件更新的核心逻辑。
• 回调传递：通过组件props传递登录/退出回调，实现跨组件的状态控制，避免直接修改父组件状态。
• 导航头部按钮：利用React Navigation的options配置，在页面头部添加退出按钮，符合移动端应用的交互习惯。
• 逻辑修正：原代码中登录状态的显示逻辑反了，修正为isLogged为true时显示抽屉导航，未登录时显示登录页。

内容的提问来源于stack exchange，提问作者g-pane