使用Expo创建新React Native项目后运行出现白屏问题

问题详情 #

使用Expo创建React Native应用，执行expo start命令启动后，应用屏幕完全空白，无任何内容显示。

命令行报错截图 #

代码示例 #

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

排查与解决方法 #

• 清除缓存重启：执行expo r -c命令清除Expo缓存并重启项目，多数空白问题由缓存异常引发。
• 核对依赖版本：确认expo、react-native等核心依赖版本兼容，参考Expo官方版本兼容说明调整。
• 检查网络连接：确保运行应用的设备/模拟器与启动Expo的电脑处于同一局域网，能正常连接Expo开发服务器。
• 分析命令行错误：仔细查看截图中的命令行报错提示，针对性修复（如依赖缺失、端口占用等问题）。
• 切换启动模式：若为Web端空白，尝试expo start --web --no-dev启动；若为移动端，重新扫码或重装Expo Go应用。

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