在 React Native 应用程序中使用 SplashScreen 和 Expo 的问题

Question

我在 React-Native 应用程序中将

SplashScreen

与

expo-splash-screen

库一起使用时遇到问题。当我运行该应用程序时，我收到一条错误消息，指示

preventAutoHideAsync

未定义。

这是我正在使用的代码：

import React, { useEffect } from 'react';
import { View, StyleSheet, ActivityIndicator } from 'react-native';
import WelcomeMessager from '../components/screens/wellcomemassge';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen'; // Updated import

const WelcomeScreen = ({ navigation }) => {
  SplashScreen.preventAutoHideAsync();
  const [loaded, error] = useFonts({
    'Hedvig': require('../assets/Fonts/HedvigLettersSans-Regular.ttf'),
  });

  useEffect(() => {
    if (loaded || error) {
      SplashScreen.hideAsync();
    }
  }, [loaded, error]);

  if (!loaded && !error) {
    return null;
  }
  
  if (!loaded) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <WelcomeMessager navigation={navigation} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#5CE84D',
    width: '100%',
    paddingBottom: 50,
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'center',
  },
});

export default WelcomeScreen;

运行应用程序时收到以下错误消息：

错误类型错误：无法读取 null 的属性“preventAutoHideAsync”

我在我的基于世博会的项目中使用

expo-splash-screen

。我需要解决这个问题，以便我可以正确使用启动画面。

• 实现的启动屏幕：我遵循了使用 expo-splash-screen 的文档，包括导入它并在组件开头调用

  preventAutoHideAsync()

  。

• 检查的软件包版本：我确保我的项目中安装了正确版本的

  expo

  和

  expo-splash-screen

  。

• 使用

  useEffect

  ：我实现了

  useEffect

  来在字体加载或出现错误时隐藏启动屏幕。

• 重新启动开发服务器：我重新启动了 Metro 捆绑程序并确保我的模拟器正常运行。

Answer 1

尝试在组件外部调用它，正如文档中建议的那样。

import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {
 // ...
}