React Navigation渲染时崩溃：按官方入门指南搭建项目后仍遇加载错误

看起来你遇到的是Expo打包时脚本加载路径错误的问题，报错里的%5C其实是Windows系统下反斜杠\的URL编码，大概率是路径解析或缓存导致的问题，和你是否严格按照官方步骤搭建关系不大。我来给你几个针对性的解决思路：

1. 优先清除Expo缓存（最有效） #

Expo的缓存经常会导致这类资源加载异常，直接重启并清除缓存：

expo r -c

这个命令会重启Expo开发服务器，同时清除所有打包缓存，很多路径相关的错误都能通过这个操作解决。

2. 检查项目路径与系统环境 #

如果你是在Windows系统上开发：

• 确保你的项目路径没有中文、空格或者特殊字符，比如不要放在我的项目\instagram_clone这种路径下，尽量用纯英文路径，比如D:\projects\instagram_clone
• Windows的路径分隔符问题偶尔会导致Expo打包时生成错误的资源URL，清除缓存后仍无效的话，可以试试把项目移动到更简单的路径下重新启动

3. 重新安装依赖确保完整性 #

有时候依赖安装过程中会出现部分包缺失的情况，执行以下命令重新安装所有依赖：

# 如果你用npm
npm install

# 如果你用yarn
yarn install

你的package.json里的依赖版本是符合Expo 44要求的（react-native-screens和react-native-safe-area-context版本都对应），重新安装可以确保所有依赖都正确到位。

额外提醒：NavigationContainer的正确用法 #

虽然这不是当前报错的原因，但官方入门指南里的NavigationContainer通常会配合一个导航器使用，空的NavigationContainer虽然不会报错，但后续开发中你需要添加导航器，比如Stack导航器：

import * as React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// 先创建一个简单的首页组件
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
      <StatusBar />
    </View>
  );
}

先试试前面三个解决步骤，尤其是清除缓存，应该能解决你当前的报错。

内容的提问来源于stack exchange，提问作者Dev-Siri