React Native使用@react-navigation跳转时报navigation.navigate不是函数错误

错误原因 #

• HomeScreen组件接收参数时未做解构：React Navigation会将包含navigation属性的props对象传递给所有路由页面组件，你直接将整个props对象命名为navigation，自然不存在navigate方法，导致报错。
• 附带问题：DetailsScreen内调用navigation.navigate时传入的路由名Details，和你在Stack中注册的路由名DetailsScreen不一致，修复完第一个问题后仍会触发路由不存在的报错。

修复后完整代码 #

import 'react-native-gesture-handler';
import * as React from 'react';
import {View, Text, Button} from 'react-native'

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// 这里给参数加解构，拿到props里的navigation属性
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button title="button"
      onPress={() => navigation.navigate('DetailsScreen')}></Button>
    </View>
  );
}


function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        // 路由名和注册的保持一致
        onPress={() => navigation.navigate('DetailsScreen')}
      />
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
       <Stack.Navigator>
        <Stack.Screen name="Homes" component={HomeScreen} />
        <Stack.Screen name="DetailsScreen" component={DetailsScreen} />
      </Stack.Navigator>
      </NavigationContainer>
  );
}

内容的提问来源于stack exchange，提问作者ritik Kumar Sharma