React Native路由保护首次加载时不渲染问题排查

核心问题 #

首次打开或重载应用时组件不渲染，本质是两个原因叠加：

1. 导航栈未配置initialRouteName，导致没有默认初始页面
2. 在NavigationContainer内直接条件切换整个栈组件，不符合React Navigation的渲染机制，状态变化无法触发正确的视图更新

修复步骤 #

1. 为导航栈设置初始路由 #

取消AppStack和AuthStack中被注释的initialRouteName，确保首次加载时有默认页面：

修改AppStack.tsx

const AppStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="Home" // 取消注释，指定默认首页
      screenOptions={{headerShown: false}}>
      {/* <Stack.Screen name="Splash" component={SplashScreen} /> */}
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="QrCode" component={QrCodeScreen} />
      <Stack.Screen name="Verified" component={VerifiedScreen} />
      <Stack.Screen name="UnVerified" component={UnVerifiedScreen} />
      <Stack.Screen name="UsedCardScreen" component={UsedCardScreen} />
      <Stack.Screen name="Privacy" component={Privacy} />
      <Stack.Screen name="Terms" component={Terms} />
      <Stack.Screen name="ChangePassword" component={ChangePassword} />
      <Stack.Screen name="ContactUs" component={ContactUs} />
    </Stack.Navigator>
  );
};

修改AuthStack.tsx

const AuthStack = () => {
    console.log("Logged out")
  return (
    <Stack.Navigator
      screenOptions={{headerShown: false}}
      initialRouteName="Login" // 取消注释，指定默认登录页
      >
      {/* <Stack.Screen name="Splash" component={SplashScreen} /> */}
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
    </Stack.Navigator>
  );
};

2. 优化路由切换逻辑（推荐） #

React Navigation不建议直接在NavigationContainer内切换整个栈组件，改用根栈承载子栈的方式，确保状态变化能触发正确渲染：

修改NavStack.tsx

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import AppStack from './AppStack';
import AuthStack from './AuthStack';
import useAuthStore from '../store/auth-store';

const RootStack = createNativeStackNavigator();

const NavStack = () => {
  const {isLoggedIn} = useAuthStore();
  console.log(isLoggedIn)
  return (
    <NavigationContainer>
      <RootStack.Navigator screenOptions={{headerShown: false}}>
        {isLoggedIn ? (
          <RootStack.Screen name="App" component={AppStack} />
        ) : (
          <RootStack.Screen name="Auth" component={AuthStack} />
        )}
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

export default NavStack;

3. 验证Zustand状态订阅（可选） #

如果仍有问题，可添加订阅确认状态变化是否能触发组件更新：

// 在NavStack.tsx中添加useEffect
import React, { useEffect } from 'react';

const NavStack = () => {
  const {isLoggedIn} = useAuthStore();
  console.log(isLoggedIn)

  useEffect(() => {
    const unsubscribe = useAuthStore.subscribe(
      (state) => state.isLoggedIn,
      (newValue) => console.log('isLoggedIn更新为:', newValue)
    );
    return unsubscribe;
  }, []);

  // ... 原有渲染逻辑
};

如果状态变化时控制台能打印日志，说明订阅正常，问题已通过前两步解决。

内容的提问来源于stack exchange，提问作者Mohammed Hamdoon