React Native：点击按钮时如何强制用户登录

核心思路 #

• 让Home始终作为导航栈的根页面，无论用户是否登录都能直接访问
• 给Home的操作按钮添加登录校验逻辑：登录状态正常就直接执行功能，未登录则跳转SignIn页面，登录完成后清除栈内的登录页并触发原按钮功能

具体实现步骤 #

1. 配置基础导航栈 #

将Home设为初始路由，同时包含SignIn页面：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="SignIn" component={SignInScreen} />
    </Stack.Navigator>
  );
}

2. 全局维护登录状态 #

用React Context实现简单的登录状态管理（也可以用Redux等状态库）：

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const login = () => {
    // 替换为实际的登录API调用逻辑
    setIsLoggedIn(true);
  };

  return (
    <AuthContext.Provider value={{ isLoggedIn, login }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

3. Home页面按钮逻辑处理 #

在按钮点击时先判断登录状态，未登录则跳转登录页并传递回调：

import { useNavigation } from '@react-navigation/native';
import { useAuth } from './AuthContext';

function HomeScreen() {
  const navigation = useNavigation();
  const { isLoggedIn } = useAuth();

  const handleActionButton = () => {
    if (isLoggedIn) {
      // 已登录，直接执行目标操作
      console.log('执行需要登录的功能');
    } else {
      // 未登录，跳转登录页并携带成功回调
      navigation.navigate('SignIn', {
        onLoginSuccess: () => {
          console.log('登录后执行目标功能');
        }
      });
    }
  };

  return (
    {/* 页面其他内容 */}
    <Button title="需登录操作" onPress={handleActionButton} />
  );
}

4. SignIn页面登录完成处理 #

登录成功后清除栈内的登录页，回到Home并触发回调：

import { useNavigation, useRoute } from '@react-navigation/native';
import { useAuth } from './AuthContext';

function SignInScreen() {
  const navigation = useNavigation();
  const route = useRoute();
  const { login } = useAuth();

  const handleLoginSubmit = () => {
    // 执行登录验证逻辑
    login();
    // 移除栈中的SignIn页面，确保栈内只剩Home
    navigation.popToTop();
    // 调用Home页面传递的回调，触发原操作
    route.params?.onLoginSuccess?.();
  };

  return (
    {/* 登录表单组件 */}
    <Button title="登录" onPress={handleLoginSubmit} />
  );
}

关键细节说明 #

• 使用popToTop而非navigate('Home')，保证登录后导航栈中只有Home页面，完全符合你想要的移除认证页面的逻辑
• 通过路由参数传递回调函数，确保登录成功后能无缝触发用户原本想执行的操作
• 全局状态管理让登录状态在所有组件中可访问，避免状态传递冗余

内容的提问来源于stack exchange，提问作者Cheesy Chameleon