ReactNative如何在NavigationContainer渲染前显示独立加载屏

核心逻辑不需要改动你已有的底部Tab导航代码，通过根组件的状态控制渲染分支即可：应用启动时默认渲染独立的启动加载页，组件挂载后启动5秒定时器，计时结束切换状态，再渲染底部Tab导航容器。两个渲染分支完全独立，启动页不属于导航栈内的页面，不会出现回退到启动页的问题。

完整实现代码 #

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

// 替换为你项目中已有的三个Tab页组件
const SettingScreen = () => <View><Text>设置页</Text></View>;
const HomeScreen = () => <View><Text>首页</Text></View>;
const CartScreen = () => <View><Text>购物车页</Text></View>;

// 独立启动加载页，完全脱离导航体系
const SplashScreen = () => {
  return (
    <View style={styles.splashWrap}>
      {/* 可替换为你的Logo、启动动画、品牌slogan等内容 */}
      <Text style={styles.splashText}>应用加载中</Text>
    </View>
  );
};

const App: React.FC = () => {
  // 启动页显示状态，默认展示启动页
  const [showSplash, setShowSplash] = useState<boolean>(true);

  useEffect(() => {
    // 设置5秒倒计时
    const splashTimer = setTimeout(() => {
      setShowSplash(false);
    }, 5000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(splashTimer);
  }, []);

  // 倒计时未结束时，直接渲染独立启动页，不挂载导航容器
  if (showSplash) {
    return <SplashScreen />;
  }

  // 倒计时结束后渲染原有底部Tab导航
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Setting" component={SettingScreen} />
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Cart" component={CartScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  splashWrap: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff' // 可自定义启动页背景色
  },
  splashText: {
    fontSize: 22,
    color: '#333'
  }
});

export default App;

扩展说明 #

如果启动阶段需要做初始化操作（比如校验登录状态、拉取远程配置、预加载资源），可以直接把固定5秒定时器的逻辑替换为你的异步任务逻辑，等异步任务全部执行完成后再调用setShowSplash(false)即可，不用改动整体渲染结构。

注意：不要把启动页配置为Tab导航或者Stack导航的一个路由页面，否则会出现用户可以通过返回操作回到启动页的问题，上述条件渲染的方案可以完全避免这个问题。

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