React Native Expo项目使用expo-splash-screen遇preventAutoHideAsync错误

我在基于Expo的React Native应用中使用expo-splash-screen库时遇到问题，运行应用时提示preventAutoHideAsync未定义，错误信息为：

ERROR TypeError: Cannot read property 'preventAutoHideAsync' of null

我的代码如下：

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;

我已经做了以下排查操作：

• 已实现启动屏：按照expo-splash-screen文档操作，包括导入并在组件开头调用preventAutoHideAsync()
• 已检查包版本：确认项目中expo和expo-splash-screen版本正确
• 已使用useEffect：实现useEffect在字体加载完成或出错时隐藏启动屏
• 已重启开发服务器：重启Metro打包器并确保模拟器运行正常

解决方法 #

1. 将preventAutoHideAsync移至useEffect中执行
   组件初始化阶段直接调用原生模块方法，可能会遇到模块未初始化完成的情况，导致null引用错误。把该方法放到useEffect的异步回调里执行：

useEffect(() => {
  async function prepare() {
    try {
      // 阻止启动屏自动隐藏
      await SplashScreen.preventAutoHideAsync();
    } catch (e) {
      console.warn(e);
    }
  }

  prepare();
}, []);

2. 优化启动屏与字体加载的联动逻辑
   修改后的完整代码：

import React, { useEffect, useState } 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';

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

  useEffect(() => {
    async function prepare() {
      try {
        await SplashScreen.preventAutoHideAsync();
      } catch (e) {
        console.warn(e);
      } finally {
        // 字体加载完成或出错后标记应用就绪
        if (loaded || error) {
          setAppIsReady(true);
        }
      }
    }

    prepare();
  }, [loaded, error]);

  useEffect(() => {
    if (appIsReady) {
      SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    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;

3. 额外检查项

• 确认app.json中已正确配置启动屏资源（splash字段）
• 若使用EAS构建，无需手动链接原生模块，Expo会自动处理相关配置

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