使用expo-splash-screen遇原生模块找不到等错误求助

问题 #

开发React Native Expo应用时，因expo-app-loading已被弃用，尝试用expo-splash-screen实现自定义字体加载，但导入模块后出现两个错误：

• ERROR Error: Cannot find native module 'ExpoSplashScreen', js engine: hermes
• 偶尔触发Invariant Violation: "main" has not been registered

已通过npx expo install expo-splash-screen和expo install expo-splash-screen完成安装，但问题依旧。当前代码如下：

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { FlatList, Image, ScrollView, StyleSheet, Text, View } from 'react-native';
import { useFonts } from 'expo-font';
import AppLoading from "expo-app-loading";
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {
  

  let [fontsLoaded] = useFonts(
    { 'Poppins': require('./assets/fonts/Poppins-Bold.ttf') })


  if (!fontsLoaded) {
    return (
      <AppLoading/>
    );
  }

  return (
    <View>
      <StatusBar style="auto" />
      <View style={styles.container}>
        <Text style={{fontFamily:'Poppins'}}>{'State, Country'}</Text>
        <Text style={{fontSize: 10 ,fontFamily:'Poppins'}}>{'Now'}</Text>
        <Image source={require('./assets/icons/cloudy.png')} style={{ height: 80, width: 80, marginTop: 80 }} />
        <Text style={{fontSize: 90 ,fontFamily:'Poppins'}}>{'23°'}</Text>
        <Text style={{fontSize: 15 ,fontFamily:'Poppins'}}>{'Mostly cloudy'}</Text>
        <Text style={{fontSize: 15,fontFamily:'Poppins', marginTop: 50 }}>{'Wind'}</Text>
        <View style={{display: 'flex', flexDirection: 'row', gap: 12, marginTop: 8 }}>
          <Image source={require('./assets/icons/wind.png')} style={{ height: 18, width: 18 }} />
          <Text style={{fontSize: 12, fontFamily:'Poppins' }}>{'km/s'}</Text>
        </View>
      </View>
      <View style={styles.glassDiv}>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    top: 50,
    textAlign: 'center'
  },
  glassDiv: {
    marginTop:130, 
    margin:25, 
    gap:20, 
    padding:10, 
    borderRadius:8,
    fontSize:15 
  }
});

解决方案 #

核心问题 #

代码同时混用已弃用的AppLoading和expo-splash-screen，且SplashScreen.preventAutoHideAsync()全局调用时机错误，加上原生模块初始化异常，导致报错。

修复步骤 #

• 移除AppLoading：删除相关导入和返回逻辑，改用expo-splash-screen的API控制启动屏
• 调整启动屏阻止时机：将preventAutoHideAsync()移至组件内部，通过useEffect在组件挂载时执行
• 字体加载完成后手动隐藏启动屏：监听fontsLoaded状态，加载完成后调用SplashScreen.hideAsync()
• 同步依赖版本：执行npx expo install确保expo-splash-screen与当前Expo SDK版本兼容

修改后的完整代码 #

import { StatusBar } from 'expo-status-bar';
import React, { useEffect } from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

export default function App() {
  const [fontsLoaded] = useFonts({
    'Poppins': require('./assets/fonts/Poppins-Bold.ttf')
  });

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

    prepare();
  }, []);

  // 字体加载完成后隐藏启动屏
  useEffect(() => {
    if (fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  // 字体未加载完成时返回null，保持启动屏显示
  if (!fontsLoaded) {
    return null;
  }

  return (
    <View>
      <StatusBar style="auto" />
      <View style={styles.container}>
        <Text style={{fontFamily:'Poppins'}}>{'State, Country'}</Text>
        <Text style={{fontSize: 10 ,fontFamily:'Poppins'}}>{'Now'}</Text>
        <Image source={require('./assets/icons/cloudy.png')} style={{ height: 80, width: 80, marginTop: 80 }} />
        <Text style={{fontSize: 90 ,fontFamily:'Poppins'}}>{'23°'}</Text>
        <Text style={{fontSize: 15 ,fontFamily:'Poppins'}}>{'Mostly cloudy'}</Text>
        <Text style={{fontSize: 15,fontFamily:'Poppins', marginTop: 50 }}>{'Wind'}</Text>
        <View style={{display: 'flex', flexDirection: 'row', gap: 12, marginTop: 8 }}>
          <Image source={require('./assets/icons/wind.png')} style={{ height: 18, width: 18 }} />
          <Text style={{fontSize: 12, fontFamily:'Poppins' }}>{'km/s'}</Text>
        </View>
      </View>
      <View style={styles.glassDiv}>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
        <View style={{display:'flex', flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'Day, Mon date'}</Text>
          <Image source={require('./assets/icons/cloudy.png')} style={{ height: 20, width: 20 }} />
          <Text style={{fontSize: 15, fontFamily:'Poppins' }}>{'28°'}</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    top: 50,
    textAlign: 'center'
  },
  glassDiv: {
    marginTop:130, 
    margin:25, 
    gap:20, 
    padding:10, 
    borderRadius:8,
    fontSize:15 
  }
});

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