React Native Firebase应用：基于onAuthStateChange切换Stack.Screen

核心思路 #

通过监听Firebase Auth的用户状态变化，动态控制导航栈的初始路由，或者在登录操作完成后直接跳转页面，实现登录后自动从LoginScreen切换到HomeScreen的需求。

实现方案 #

方案一：监听认证状态，动态设置初始路由（解决应用重启自动登录场景）

在导航入口文件（比如App.js）中监听用户认证状态，根据用户是否存在决定初始显示的页面：

import React, { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  const [user, setUser] = useState(null);
  const auth = getAuth();

  useEffect(() => {
    // 订阅用户认证状态变化
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });

    // 组件卸载时取消订阅，避免内存泄漏
    return unsubscribe;
  }, [auth]);

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName={user ? 'Home' : 'Login'}
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

方案二：登录成功后直接跳转（处理主动登录场景）

在LoginScreen中完成登录操作后，调用导航的replace方法跳转到HomeScreen（用replace避免用户通过返回键回到登录页）：

import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
import { View, TextInput, Button, Alert } from 'react-native';
import React, { useState } from 'react';

export default function LoginScreen({ navigation }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const auth = getAuth();

  const handleLogin = async () => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
      // 登录成功后替换当前路由为Home
      navigation.replace('Home');
    } catch (error) {
      Alert.alert('登录失败', error.message);
    }
  };

  return (
    <View style={{ padding: 20, justifyContent: 'center', flex: 1 }}>
      <TextInput
        placeholder="邮箱"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        style={{ borderBottomWidth: 1, marginBottom: 15, padding: 8 }}
      />
      <TextInput
        placeholder="密码"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={{ borderBottomWidth: 1, marginBottom: 20, padding: 8 }}
      />
      <Button title="登录" onPress={handleLogin} />
    </View>
  );
}

关键注意事项 #

• 两种方案结合使用效果最佳：监听状态处理自动登录，登录操作后直接跳转处理主动登录场景。
• 使用navigation.replace而非navigation.navigate，确保登录后无法返回登录页面。
• 确保已在项目中正确初始化Firebase Auth（完成Firebase配置文件的引入和初始化步骤）。

内容的提问来源于stack exchange，提问作者David Guri