如何使用expo在React Native构建中隐藏启动屏幕

Question

我的应用程序在启动屏幕后未加载。它就卡在那里了。 所以我添加了 expo-splash-screen 但仍然没有通过启动屏幕。在添加启动画面之前，一切正常:(

这是我的 App.js 代码。正如您所看到的，它仅包含导航容器，该容器包含指向其他屏幕（包括主主屏幕）的链接。

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>)

请告诉我哪里做错了，哪里做错了。

Answer 1

我给你了工作示例，请检查一下
如果你不明白的话请告诉我

代码

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

也许传递你的 setAppIsReady(true);最后然后像这样删除它

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()
 }, [])

Answer 3

我只在渲染的第一个组件的 useEffect 中添加

await SplashScreen.hideAsync();

。我的启动画面之前没有隐藏，但仍然可见，但添加splashscreen.hideAsync()后，屏幕会显示，直到加载应用程序。我也在 app.json 中指定了这样的启动画面

 "splash": {
      "image": "./assets/log.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },