无法使用 React 导航从登录屏幕导航到报价屏幕

Question

我当前有 2 个屏幕，我的目录结构如下所示：

/观看次数

/Quote

  Quote.js

SignIn.js

应用程序.js

我定义了我的 App.js，如下所示：

import { StyleSheet } from 'react-native'
import React from 'react'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import SignIn from './views/Signin';
import Quote from './views/Quote/Quote';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="SignIn">
        <Stack.Screen name="SignIn" component={SignIn} options={{headerShown:false}} />
        <Stack.Screen name="Quote" component={Quote} options={{title:"Atlas Insurance Limited"}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App

我的 SignIn.js 是：

import React from 'react';
import { View, Button } from 'react-native';

const SignIn = ({ navigation }) => {
  const handleSignIn = () => {
    console.log('Sign In button pressed'); // Debugging log
    navigation.navigate('Quote'); // Ensure this matches the name in the stack navigator
  };

  return (
    <View>
      {/* Your sign-in form and logic */}
      <Button title="Sign In" onPress={handleSignIn} />
    </View>
  );
};

export default SignIn;

我仍然收到以下错误：

任何导航器均未处理有效负载 {"name": "Quote"} 的操作“NAVIGATE”。 您有一个名为“报价”的屏幕吗？

我完全按照文档进行操作，但无法解决此错误。

Answer 1

重置 Metro 缓存解决了此错误