React Native实现仅首次展示欢迎页，如何解决重启应用闪屏问题

问题原因 #

闪屏的根本原因是你给shouldDisplayWelcome的初始值为true，AsyncStorage读取是异步操作，在读取结果返回前，组件已经完成首次渲染，直接展示了欢迎页，等读取结果返回更新状态后，又立即切换到首页，就出现了闪屏。你之前加await的方案没有解决问题，是因为useEffect的执行时机是在组件首次渲染完成之后，无论是否加await，首次渲染的结果还是欢迎页。

可行解决方案 #

方案1：新增加载状态（改动最小） #

新增一个加载状态，在存储读取完成前，渲染和启动屏样式一致的占位视图，等读取完成后再渲染对应导航页面，完全避开欢迎页的误展示。
修改后的代码示例：

import { View, Image } from 'react-native'

// 状态定义
const [isLoading, setIsLoading] = useState<boolean>(true);
// 初始值改为false，避免误渲染欢迎页
const [shouldDisplayWelcome, setShouldDisplayWelcome] = useState<boolean>(false);

useEffect(() => {
  const checkFirstLaunch = async () => {
    try {
      const firstTime = await StorageManager.getInstance().getData(Key.firstTime);
      // 首次启动时key不存在，展示欢迎页；后续启动取存储的布尔值
      setShouldDisplayWelcome(firstTime === undefined ? true : firstTime);
    } catch (err) {
      // 读取异常默认进入首页，可根据业务调整
      setShouldDisplayWelcome(false);
    } finally {
      setIsLoading(false);
    }
  }
  checkFirstLaunch();
}, []);

// 渲染逻辑
return (
  <ThemeProvider>
    <Provider store={store}>
      {isLoading ? (
        // 此处渲染和你应用启动屏完全一致的视图，做到视觉无缝衔接
        <View style={{flex: 1, backgroundColor: '#ffffff', alignItems: 'center', justifyContent: 'center'}}>
          <Image source={require('./assets/你的启动屏logo地址.png')} />
        </View>
      ) : (
        <NavigationContainer>
          {/* 显式指定初始路由，避免导航结构动态变化带来的异常 */}
          <Stack.Navigator initialRouteName={shouldDisplayWelcome ? 'Welcome' : 'Home'}>
            {shouldDisplayWelcome && (
              <Stack.Screen
                name="Welcome"
                component={Welcome}
                options={{ headerShown: false }}
              />
            )}
            <Stack.Screen
              name="Home"
              component={Home}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Settings"
              component={Settings}
              options={{ headerShown: false }}
            />
          </Stack.Navigator>
        </NavigationContainer>
      )}
    </Provider>
  </ThemeProvider>
);

方案2：配合原生启动屏（体验最优） #

使用react-native-splash-screen这类启动屏控制库，应用启动后默认保持原生启动屏显示，直到存储读取完成、路由判断结束后，再隐藏启动屏渲染对应页面，用户完全感知不到等待过程，也不需要额外写占位视图。
核心改动点：

1. 按照库的文档完成原生端配置，应用启动时自动显示启动屏
2. 在上述checkFirstLaunch方法的finally回调中，调用SplashScreen.hide()隐藏启动屏即可。

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