React Native/Expo导航组件语法错误排查求助

开发者阿泽

2026-7-11

问题分析与解决方案

核心错误原因

你的导航文件命名为index.ts，但其中包含JSX语法（比如<StatusBar>、<SafeAreaProvider>这类标签）。TypeScript默认规则是：只有.tsx扩展名的文件才会被解析为包含JSX的组件文件，.ts文件仅处理纯TypeScript代码，无法识别JSX语法，这就是触发Unexpected token错误的根本原因。

步骤1：修正文件扩展名

将navigation/index.ts重命名为navigation/index.tsx，确保TypeScript能正确解析JSX语法。

步骤2：优化代码逻辑冗余

你的代码中存在重复的isLoaded判断，比如：

{isLoaded &&
    isLoaded && isSignedIn ? <AppStackNavigator /> : isLoaded && <AuthStackNavigator />
}

外层已经判断了isLoaded，内部无需重复校验，可简化为：

{isLoaded && (isSignedIn ? <AppStackNavigator /> : <AuthStackNavigator />)}

修正后的完整代码

import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { StatusBar } from 'expo-status-bar';
import { useUser } from '@clerk/clerk-expo';

import AppStackNavigator from './Stack/AppStack';
import AuthStackNavigator from './Stack/AuthStackNavigator';
import LoadingComponent from '../components/LoadingComponent';

const Navigation = () => {
    const { isSignedIn, isLoaded } = useUser();

    return (
        <SafeAreaProvider>
            <StatusBar style="light" translucent={true} backgroundColor="transparent" animated />
            <NavigationContainer theme={DefaultTheme} fallback={<LoadingComponent />}>
                {!isLoaded && <LoadingComponent />}
                {isLoaded && (isSignedIn ? <AppStackNavigator /> : <AuthStackNavigator />)}
            </NavigationContainer>
        </SafeAreaProvider>
    );
};

export default Navigation;