React Navigation：无法从SignIn页面导航至Quote页面的问题

以下是针对该报错的排查和解决步骤：

• 严格匹配Screen名称的大小写
  React Navigation的页面名称是大小写敏感的，必须保证App.js中注册页面时的name属性与navigation.navigate()中的字符串完全一致。比如注册时写：

  <Stack.Screen name="Quote" component={Quote} />
  

  那么跳转时就必须用navigation.navigate('Quote')，不能写成'quote'或'QUOTE'。

• 验证Quote组件的导入路径
  你的目录结构是/views/Quote/Quote.js，在App.js中导入该组件时路径必须准确：

  import Quote from './views/Quote/Quote';
  

  若路径错误（比如写成./views/Quote或./views/Quote.js），会导致组件未正确加载，导航器无法识别该页面。

• 确认导航器结构完整性
  检查App.js中的导航器代码是否正确嵌套，确保Quote页面直接注册在根Stack导航器内，示例代码如下：

  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} />
          <Stack.Screen name="Quote" component={Quote} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
  
  export default App;
  

• 检查SignIn页面的navigation对象来源
  确保SignIn页面中的navigation是通过React Navigation提供的方式获取的：

  import { useNavigation } from '@react-navigation/native';
  import { Button } from 'react-native';
  
  function SignIn() {
    const navigation = useNavigation();
    return (
      <Button
        title="进入Quote页面"
        onPress={() => navigation.navigate('Quote')}
      />
    );
  }
  
  export default SignIn;
  

  若通过props传递navigation，需确保SignIn页面已正确注册在导航器的Screen中，才能接收到该props。

内容的提问来源于stack exchange，提问作者Muhammad Saim Iqbal