React Native Expo迁移TS后卡在默认启动页问题求助

问题根源 #

出现该问题是因为Expo Router配置冲突、TypeScript编译配置缺失，或是缓存残留导致系统无法识别index.tsx作为入口文件。

解决步骤 #

1. 修正app.json配置

移除app.json中的entryPoint字段——使用Expo Router时，package.json里的main字段已指定为expo-router/entry，手动设置entryPoint会干扰路由系统的自动入口识别。修改后的app.json如下：

{
  "expo": {
    "name": "gymingo",
    "slug": "gymingo",
    "version": "1.0.0",
    "orientation": "portrait",
    "scheme": "acme",
    "userInterfaceStyle": "automatic",
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.example.app",
      "config": {
        "googleMapsApiKey": ""
      }
    }
  }
}

2. 配置tsconfig.json

如果项目根目录没有tsconfig.json，创建一个；已有则检查关键配置是否匹配：

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx"
  },
  "include": ["**/*"]
}

该配置确保TypeScript能正确编译项目内所有文件，包括app目录下的index.tsx。

3. 验证index.tsx内容

确保./app/index.tsx符合Expo Router的入口要求，示例代码如下：

import { Stack } from 'expo-router';

export default function RootLayout() {
  return <Stack />;
}

若为单页面应用，也可直接导出根组件：

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello TypeScript!</Text>
    </View>
  );
}

4. 清除缓存并重启项目

执行命令清除旧缓存，避免JS编译残留干扰：

expo start -c

重启后系统会重新编译TypeScript文件，正确识别index.tsx作为入口。

额外检查点 #

• 确保package.json中的main字段保持为expo-router/entry，不要修改。
• 检查根目录和app目录，删除可能残留的index.js文件。

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