如何使用 expo 在本机构建中隐藏启动画面

Question

My app is not loading after splash screen. It just stuck there. So I added expo-splash-screen and still is not passing the splash screen. Before adding splash screen everything was working fine:(

See this is my App.js code. As you can see it only holds the navigation container which holds the links to other screens including the main home screen.

import {StatusBar } from 'expo-status-bar';
import { StyleSheet } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { MaterialIcons } from "@expo/vector-icons";
import { HomeNavigator } from './CustomNavigation';
import * as Font from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import FavouritesScreen from './src/screens/FavouritesScreen'
import HomeScreen from './src/screens/HomeScreen';
import MoreOptions from './src/screens/MoreOptions'
import React, { useEffect, useState } from 'react'
console.reportErrorsAsExceptions = false; //to hide touch warning
const Stack = createNativeStackNavigator()

const Tab = createBottomTabNavigator();
 
SplashScreen.preventAutoHideAsync();

 
export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false)
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
     async function prepare() {
        try {
 
        await Font.loadAsync(Entypo.font);
      
        await new Promise(resolve => setTimeout(resolve, 2000));
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the application to render
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);
 const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
    
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;` `
  }

  return (
    <View
      style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
      onLayout={onLayoutRootView}>
 <StatusBar barStyle="dark-content" hidden={false} backgroundColor="#ff3b3b" translucent={true} />
      <NavigationContainer>
    //it contains nothing but the navigation code
     </NavigationContainer>

</View>)

Please tell me where and what I'm doing wrong here.

Answer 1

I give you the working example please check it
then after you don't understand let me know

code

import React, { useRef, useEffect } from 'react';
import { StyleSheet, View, Image, StatusBar, Text } from 'react-native';

/**
 * RN libraries
 */
import { useNavigation } from '@react-navigation/native';

export default function Splash() {
  const animation = useRef(null);
  const navigation = useNavigation();

  useEffect(() => {
    animation.current?.play();

    navigation.addListener('focus', () => {
      animation.current?.play();
    });

    setTimeout(() => {
      navigate();
    }, 2500);
  }, []);

  const navigate = () => {
    navigation.navigate('Home');
  };

  return (
    <View style={styles.animationContainer}>
      <Text
        style={{
          textAlign: 'center',
          fontSize: 50,
          fontStyle: 'italic',
          fontFamily: 'Poppins-Medium',
          fontWeight: '800',
          color: '#fff',
        }}>
        Online{'\n'}Education
      </Text>
      <Text
        style={{ color: '#fff', fontSize: 20, fontFamily: 'Poppins-Medium' }}>
        Free{'\n'}
      </Text>
      <View
        style={{
          backgroundColor: '#5D6CFA',
          width: 169,
          height: 117,
          borderRadius: 60,
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        {/* <Text style={{color:"#000",fontFamily:'Poppins-Bold',fontSize:25}}>Let's start</Text> */}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  animationContainer: {
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
});

Answer 2

Maybe pass your setAppIsReady(true); after the finally and then remove it like this

React.useEffect(() => {
   async function prepare() {
     try {
       // Pre-load fonts, make any API calls you need to do here
       AsyncStorage.setItem("alreadyAppLaunched", "true")
       await LoadFonts()
       await checkOsDarkMode()
       await stores.AuthStore.getAllData()
     } catch (e) {
       console.warn(e);
     }
     setReady(true);
   }
   prepare()
 }, [])