基于React Native Expo与Firebase实现注册引导及登录跳转逻辑优化

一、导航结构调整 #

首先更新React Navigation栈，新增三个引导页面，并配置页面返回规则：

• VerifyEmailPrompt（第一屏）：禁用导航栏返回按钮，阻止物理返回
• EmailVerified（第二屏）：仅允许返回VerifyEmailPrompt，禁止回到注册/登录页
• PostVerificationSetup（第三屏）：完成后跳转Home时清空整个导航栈

示例导航配置（React Navigation 6+）：

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator initialRouteName="Welcome">
      {/* 未登录页面 */}
      <Stack.Screen name="Welcome" component={Welcome} />
      <Stack.Screen name="SignUp" component={SignUp} />
      <Stack.Screen name="Login" component={Login} />
      
      {/* 引导流程页面 */}
      <Stack.Screen 
        name="VerifyEmailPrompt" 
        component={VerifyEmailPrompt} 
        options={{ headerLeft: () => null }}
      />
      <Stack.Screen name="EmailVerified" component={EmailVerified} />
      <Stack.Screen name="PostVerificationSetup" component={PostVerificationSetup} />
      
      {/* 主页面 */}
      <Stack.Screen name="Home" component={Home} options={{ headerLeft: () => null }} />
    </Stack.Navigator>
  );
}

二、注册流程修改 #

在SignUp页面，完成Firebase注册与验证邮件发送后，直接跳转第一引导屏并清空栈，避免返回注册页：

// SignUp.js 中Create Account按钮点击逻辑
const handleCreateAccount = async () => {
  try {
    if (password !== confirmPassword) {
      alert("Passwords don't match");
      return;
    }
    // Firebase注册用户
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;
    // 更新displayName
    await updateProfile(user, { displayName: displayName });
    // 发送验证邮件
    await sendEmailVerification(user);
    // 跳转第一引导屏，清空栈
    navigation.reset({
      index: 0,
      routes: [{ name: 'VerifyEmailPrompt' }],
    });
  } catch (error) {
    alert(error.message);
  }
};

三、第一引导屏（VerifyEmailPrompt）实现 #

• 显示提示文本Verify your email from inbox
• 阻止物理返回，监听邮箱验证状态，验证成功后跳转第二屏
• 可添加重新发送验证邮件功能

import { BackHandler, Alert, View, Text, Button } from 'react-native';
import { onAuthStateChanged, sendEmailVerification } from 'firebase/auth';
import { auth } from '../firebase/config';
import { useEffect } from 'react';

function VerifyEmailPrompt({ navigation }) {
  useEffect(() => {
    // 阻止物理返回
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true);
    // 监听用户验证状态
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user?.emailVerified) {
        navigation.navigate('EmailVerified');
      }
    });
    return () => {
      backHandler.remove();
      unsubscribe();
    };
  }, [navigation]);

  const resendVerification = async () => {
    const user = auth.currentUser;
    if (user) {
      await sendEmailVerification(user);
      Alert.alert('Verification email resent');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Verify your email from inbox</Text>
      <Button title="Resend Verification Email" onPress={resendVerification} style={{ marginTop: 20 }} />
    </View>
  );
}

四、第二引导屏（EmailVerified）实现 #

• 显示提示文本email address verified
• 配置返回按钮仅回到第一引导屏
• 添加Continue按钮跳转第三屏

import { View, Text, Button } from 'react-native';
import { useEffect } from 'react';

function EmailVerified({ navigation }) {
  useEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <Button title="< Back" onPress={() => navigation.goBack()} />
      ),
    });
  }, [navigation]);

  const handleContinue = () => {
    navigation.navigate('PostVerificationSetup');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>email address verified</Text>
      <Button title="Continue" onPress={handleContinue} style={{ marginTop: 20 }} />
    </View>
  );
}

五、第三引导屏（PostVerificationSetup）实现 #

• 可添加用户自定义设置（如头像、偏好）
• 完成后跳转Home页，清空整个导航栈，禁止返回引导/登录页

import { View, Text, Button } from 'react-native';

function PostVerificationSetup({ navigation }) {
  const handleComplete = async () => {
    // 可选：记录用户引导完成状态（建议存在Firestore或Firebase自定义Claims）
    // await setDoc(doc(db, 'users', auth.currentUser.uid), { isSetupComplete: true });
    
    // 重置导航栈，仅保留Home页
    navigation.reset({
      index: 0,
      routes: [{ name: 'Home' }],
    });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Complete your setup</Text>
      <Button title="Finish & Go to Home" onPress={handleComplete} style={{ marginTop: 20 }} />
    </View>
  );
}

六、全局登录状态判断调整 #

在App.js中修改onAuthStateChanged逻辑，根据用户验证状态与引导完成状态跳转对应页面：

import { useState, useEffect } from 'react';
import { onAuthStateChanged } from 'firebase/auth';
import { doc, getDoc } from 'firebase/firestore';
import { auth, db } from './firebase/config';
import { NavigationContainer } from '@react-navigation/native';
import { ActivityIndicator } from 'react-native';

const navigationRef = React.createRef();

function App() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
      setIsLoading(false);
      if (currentUser) {
        if (!currentUser.emailVerified) {
          // 已登录未验证，跳转第一引导屏
          navigationRef.current?.reset({
            index: 0,
            routes: [{ name: 'VerifyEmailPrompt' }],
          });
        } else {
          // 检查是否完成引导流程
          const userDoc = await getDoc(doc(db, 'users', currentUser.uid));
          const isSetupComplete = userDoc.data()?.isSetupComplete || false;
          if (isSetupComplete) {
            navigationRef.current?.reset({
              index: 0,
              routes: [{ name: 'Home' }],
            });
          } else {
            // 已验证未完成引导，跳转第二屏
            navigationRef.current?.navigate('EmailVerified');
          }
        }
      } else {
        // 未登录，跳转Welcome页
        navigationRef.current?.reset({
          index: 0,
          routes: [{ name: 'Welcome' }],
        });
      }
    });
    return unsubscribe;
  }, []);

  if (isLoading) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <NavigationContainer ref={navigationRef}>
      <AppNavigator />
    </NavigationContainer>
  );
}

关键注意事项 #

• 用navigation.reset严格控制导航栈，避免用户通过返回键回到引导/登录页
• 引导完成状态建议存在Firebase服务端，避免本地存储被清除导致重复引导
• 物理返回键监听需在组件卸载时移除，防止内存泄漏

内容的提问来源于stack exchange，提问作者Shaidozzaman Araf