React Native添加多个Stack.Screen时出现Unexpected token错误求助

1. 「Unexpected token」错误排查 #

添加第二个Stack.Screen触发语法错误，90%是第一个Screen的配置存在语法疏漏：

• 检查第一个Stack.Screen末尾是否多写了逗号（比如component={LoginScreen},），JSX中组件属性末尾不能加多余逗号
• 确认第一个Screen的闭合标签/>是否完整，有没有漏写
• 检查第二个Screen的属性写法，比如name的引号是否配对、component的大括号是否正确包裹

错误示例：

<Stack.Navigator>
  <Stack.Screen 
    name="Login" 
    component={LoginScreen},  // 此处多余逗号会触发语法错误
  />
  <Stack.Screen 
    name="Register" 
    component={RegisterScreen}
  />
</Stack.Navigator>

修正后：

<Stack.Navigator>
  <Stack.Screen 
    name="Login" 
    component={LoginScreen}
  />
  <Stack.Screen 
    name="Register" 
    component={RegisterScreen}
  />
</Stack.Navigator>

2. 「找不到RegisterScreen」问题排查 #

（1）导入路径与方式错误 #

检查AuthNavigator中的导入语句：

• 确认文件路径是否正确，比如是./screens/RegisterScreen还是../screens/RegisterScreen，层级别搞混
• 检查拼写：有没有把RegisterScreen写成RegsiterScreen这类笔误
• 匹配导出方式：如果RegisterScreen是默认导出，用import RegisterScreen from './RegisterScreen'；如果是命名导出，必须用import { RegisterScreen } from './RegisterScreen'

（2）RegisterScreen的导出问题 #

打开RegisterScreen.tsx确认导出逻辑：
默认导出示例：

const RegisterScreen = () => {
  return <View><Text>注册页面</Text></View>;
};
export default RegisterScreen;

命名导出示例：

export const RegisterScreen = () => {
  return <View><Text>注册页面</Text></View>;
};

（3）缓存与配置兜底检查 #

虽然你已经做过依赖重装，但可以再试这两步：

• 清除Metro缓存：执行npx react-native start --reset-cache
• 确认babel.config.json的预设配置正确：

{
  "presets": ["module:metro-react-native-babel-preset"]
}

3. 额外排查点 #

• 检查package.json中@react-navigation/native和@react-navigation/stack的版本是否兼容，建议两者都升级到最新稳定版
• TypeScript项目需确认tsconfig.json的compilerOptions中jsx设置为"react-native"

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