React Native组件导航传参报错：undefined is not a method

错误核心原因 #

1. 导航参数接收错误：React Navigation的navigation是组件props的一个属性，你直接将它作为组件的第一个参数传入，导致navigation实际是整个props对象（或undefined，若组件未被导航栈包裹），自然调用navigate会报错。
2. 组件未纳入导航栈：如果ScreenA没有被正确配置到React Navigation的导航栈中，组件根本无法获取到navigation props。
3. 冗余导入：单个页面组件不需要导入NavigationContainer，它是包裹整个导航结构的根组件。

修正步骤及代码示例 #

1. 修正ScreenA组件的参数接收方式 #

import React from 'react';
import { StyleSheet, Text, View, Pressable } from 'react-native';

// 解构props中的navigation属性
export default function ScreenA({ navigation }: { navigation: any }) {
    const onPressHandler = () => {
        navigation.navigate("Screen_B", { ItemName: 'Item from ScreenA', ItemId: 12 });
    };

    // 补充组件的返回渲染内容（原代码缺失）
    return (
        <View style={styles.container}>
            <Pressable onPress={onPressHandler} style={styles.button}>
                <Text>跳转到Screen_B</Text>
            </Pressable>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        paddingHorizontal: 16,
        paddingVertical: 8,
        backgroundColor: '#e0e0e0',
        borderRadius: 4,
    },
});

2. 配置导航栈（根组件示例，如App.tsx） #

确保ScreenA和Screen_B都被注册到导航栈中，并被NavigationContainer包裹：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import ScreenA from './ScreenA';
import ScreenB from './ScreenB'; // 替换为你的Screen_B组件路径

const Stack = createStackNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="ScreenA">
                <Stack.Screen name="ScreenA" component={ScreenA} />
                <Stack.Screen name="Screen_B" component={ScreenB} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

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