当我使用 Expo 启动 React Native 应用程序时出现“无与伦比的路线”

Question

我是 React Native 新手，我只是想用 Expo 启动我的 React Native 应用程序，当我通过 Expo Go 应用程序访问 Metro Bundler 时，立即说：“不匹配的路线 - 找不到页面”。

屏幕错误：

在 App.tsx：

import React from 'react';
import Navigation from './app/Navigation/Navigation';

export default function App() {
  return (
    <Navigation />
  );
}

在 app/Navigation/Navigation.tsx:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from '../pages/Home';
import StartScreen from '../pages/StartScreen';

const Stack = createNativeStackNavigator();

export default function Navigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="StartScreen">
        <Stack.Screen name="StartScreen" component={StartScreen} />
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在 app/pages/Home.tsx:

import { View, Text, SafeAreaView, useColorScheme } from 'react-native';
import styles from '../utilities/styles';
import React from 'react';
const packageJson = require('../../package.json');

const appVersion = packageJson.version;

const Home = () => {

    const colorScheme = useColorScheme();

    const themeContainerStyle = colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
    const themeTextStyle = colorScheme === 'light' ? styles.lightTextTheme : styles.darkTextTheme;

    return (
        <SafeAreaView style={[styles.container, themeContainerStyle]}>
            <View style={[styles.contentCenter]}>
                <Text style={[themeTextStyle, styles.h3]}>Home Page</Text>
            </View>
            <View style={[styles.contentEnd]}>
                <Text style={[themeTextStyle]}>Ver: {appVersion}</Text>
            </View>
        </SafeAreaView>
    )
}

export default Home;

在 app/pages/StartScreen.tsx:

import { View, Text, SafeAreaView, useColorScheme } from 'react-native';
import styles from '../utilities/styles';
import React from 'react';
const packageJson = require('../../package.json');

const appVersion = packageJson.version;

const StartScreen = () => {

    const colorScheme = useColorScheme();

    const themeContainerStyle = colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
    const themeTextStyle = colorScheme === 'light' ? styles.lightTextTheme : styles.darkTextTheme;

    return (
        <SafeAreaView style={[styles.container, themeContainerStyle]}>
            <View style={[styles.contentCenter]}>
                <Text style={[themeTextStyle, styles.h3]}>Project Spectrum</Text>
            </View>
            <View style={[styles.contentEnd]}>
                <Text style={[themeTextStyle]}>Ver: {appVersion}</Text>
            </View>
        </SafeAreaView>
    )
}

export default StartScreen;

我刚刚尝试将入口点路由添加到 app.json 中，但即使这样它也不起作用。

Answer 1

我遇到了同样的问题，首次在 Expo Go 中启动应用程序时，它会显示“不匹配的路线”，但在选项卡之间导航时，它会显示屏幕。我在类似的 GitHub 问题上发现了此评论。将第一个屏幕的文件名更改回“index.js”并使用 npx expo start -c 清除缓存为我修复了它。