React Native Navigation：如何将Home屏幕设为应用根父屏幕？

要彻底让Home成为应用的根页面，避免用户返回加载页，最可靠的方式是重置导航栈，而不是普通的页面跳转。

方法一：使用navigation.reset重置栈 #

在AnimatedAppLoader中，将原来的navigation.navigate('Home')替换为栈重置操作：

navigation.reset({
  index: 0,
  routes: [{ name: 'Home' }],
});

这个操作会清空当前导航栈，只保留Home页面作为唯一路由。无论是返回手势、顶部返回按钮还是Android系统返回键，都不会再回到AnimatedAppLoader——因为栈里已经没有这个页面了。

方法二：根据加载状态动态设置初始路由 #

如果你的加载逻辑可以在App根组件中完成，也可以直接通过状态控制Stack.Navigator的初始路由：

import { useState, useEffect } from 'react';
import { Stack.Navigator, Stack.Screen } from '@react-navigation/stack';

const App = () => {
  const [isAppReady, setIsAppReady] = useState(false);

  useEffect(() => {
    // 模拟应用初始化逻辑（比如加载资源、请求数据）
    const initApp = async () => {
      await fetchInitialData();
      // 可选：等待加载动画播放完成
      await new Promise(resolve => setTimeout(resolve, 1500));
      setIsAppReady(true);
    };
    initApp();
  }, []);

  return (
    <Stack.Navigator
      initialRouteName={isAppReady ? 'Home' : 'AnimatedAppLoader'}
    >
      <Stack.Screen
        name="AnimatedAppLoader"
        component={AnimatedAppLoader}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Home"
        component={Home}
      />
    </Stack.Navigator>
  );
};

这种方式下，应用初始化完成后，导航栈会直接以Home作为初始页面，根本不会把AnimatedAppLoader留在栈中，从根源解决了返回问题。

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