如何在使用react-native导航时先获得闪屏，然后再进入主屏幕？

// Step 1: 创建启动屏幕组件
import React, { useEffect } from 'react';
import SplashScreen from 'react-native-splash-screen';

const SplashScreenComponent = () => {
  useEffect(() => {
    // 在组件加载完成后，隐藏启动屏幕
    SplashScreen.hide();
  }, []);

  // 可以在这里添加闪屏效果的布局和动画

  return (
    // 启动屏幕的内容
  );
};

export default SplashScreenComponent;

// Step 2: 在App.js中使用启动屏幕组件
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SplashScreenComponent from './SplashScreenComponent';
import MainScreenComponent from './MainScreenComponent';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Splash">
        <Stack.Screen name="Splash" component={SplashScreenComponent} options={{ headerShown: false }} />
        <Stack.Screen name="Main" component={MainScreenComponent} options={{ headerShown: false }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

// Step 3: 在启动屏幕组件中添加定时器，导航到主屏幕
import React, { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';
import SplashScreen from 'react-native-splash-screen';

const SplashScreenComponent = () => {
  const navigation = useNavigation();

  useEffect(() => {
    // 在组件加载完成后，隐藏启动屏幕并导航到主屏幕
    setTimeout(() => {
      SplashScreen.hide();
      navigation.navigate('Main');
    }, 2000); // 设置显示时间为2秒
  }, []);

  // 可以在这里添加闪屏效果的布局和动画

  return (
    // 启动屏幕的内容
  );
};

export default SplashScreenComponent;