React Native：如何在App组件useEffect执行后启动Home页面？

1. 为什么Home页面先被调用？ #

没错，就是因为你在Drawer.Navigator中设置了initialRouteName="home"。NavigationContainer初始化时会立即渲染指定的初始路由页面，而App组件的useEffect是在App组件挂载完成后才执行的，这个时机晚于导航初始化渲染初始路由的时机，所以Home页面的生命周期会先触发。

2. 如何实现App的useEffect完成后再启动Home页面？ #

你可以通过在App组件中添加加载状态，延迟渲染导航组件，确保初始化操作完成后再加载导航和Home页面。具体实现如下：

修改后的App组件代码 #

import { useState, useEffect } from 'react';
import { ActivityIndicator, View } from 'react-native';

function App(): JSX.Element {      
    // 初始化状态标记是否完成操作
    const [isInitCompleted, setIsInitCompleted] = useState(false);

    useEffect(() => {
        // 这里执行你的初始化操作（比如异步请求、本地存储读取等）
        console.log("App");
        
        // 操作完成后更新状态，允许渲染导航
        setIsInitCompleted(true);
    }, []);

    // 未完成初始化时显示加载界面
    if (!isInitCompleted) {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <ActivityIndicator size="large" />
            </View>
        );
    }

    // 初始化完成后再渲染导航，此时Home页面才会被加载
    return <AppNavigation />;
}

原理说明 #

通过isInitCompleted状态控制导航组件的渲染时机：当App的useEffect中的初始化操作未完成时，只显示加载组件；操作完成后再渲染AppNavigation，此时NavigationContainer才会初始化并渲染Home页面，确保初始化操作先于Home页面加载完成。

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