React Native报错TypeError: Navigation.navigate未定义，页面跳转失败求助

• 先排查变量大小写问题：你代码里写的是Navigation（大写N），但React Navigation提供的导航对象是小写的navigation，大小写不匹配直接会导致undefined，这大概率是核心问题。

• 确保组件能拿到导航对象：

  • 函数组件直接用useNavigation钩子（React Navigation 5+支持），不用依赖props传递：

    import { useNavigation } from '@react-navigation/native';
    
    const YourComponent = () => {
      const navigation = useNavigation();
      return (
        <TouchableOpacity onPress={() => navigation.navigate('DetailsPage2')}>
          {/* 按钮内容 */}
        </TouchableOpacity>
      );
    };
    

  • 类组件要通过props接收navigation：

    class YourComponent extends React.Component {
      render() {
        return (
          <TouchableOpacity onPress={() => this.props.navigation.navigate('DetailsPage2')}>
            {/* 按钮内容 */}
          </TouchableOpacity>
        );
      }
    }
    

• 确认组件在导航栈中注册：
  只有被注册到NavigationContainer包裹的路由栈里的页面，才能直接通过props获取navigation。如果你的组件是嵌套在非路由组件内部，必须用useNavigation或者手动传递navigation props。

• 纠正错误的API用法：

  • getParam是用来获取路由参数的，不是跳转页面的，正确用法是navigation.getParam('你的参数名', 默认值)
  • push方法是有效的跳转方式，但前提是navigation对象存在，且DetailsPage2已经在导航栈中正确注册（名称要完全匹配，大小写敏感）

• 适配React Navigation版本：
  如果用的是v6版本，路由注册要使用createNativeStackNavigator，并确保DetailsPage2在Stack.Screen中声明：

  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  import DetailsPage2 from './DetailsPage2';
  
  const Stack = createNativeStackNavigator();
  
  function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="当前页面名称" component={你的当前组件} />
          <Stack.Screen name="DetailsPage2" component={DetailsPage2} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
  

内容的提问来源于stack exchange，提问作者Ehtesham Anwar