TypeError: undefined is not an object (evaluating 'navigation.navigate'), cannot navigate from component placed on screen to another screen

Question

我正在尝试从主页上的组件导航到另一个屏幕，但下面的代码不起作用。我想我尝试了在互联网上找到的所有解决方案，但其中 none 似乎有效。（主页上的按钮有效）

首页：

import * as React from 'react';
import { StyleSheet,View ,Button} from 'react-native';
import RecipeButton from '../components/recipeButton';
import recipes from '../../assets/data/recipes';
import { StatusBar } from 'expo-status-bar';

export default function HomePage({navigation}: {navigation: any}) {
  return(
    <View style={styles.container}>
    <StatusBar style="light" backgroundColor="black" translucent={false} />
    <FlatList 
      style={{width:'100%'}}
      data={recipes}
      renderItem={({ item }) => <RecipeButton item={item} />}
    />
    <Button title='navigate to recipe' onPress={() => {
      navigation.navigate("Recipe")
    }} />
  </View>
  )
}

组件脚本：

import React from 'react';
import { Image, View, Text, Pressable} from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import styles from './styles';

interface recipeButtonProps {
    item: {
        image: string,
    }
}


const RecipeButton = ({ item }: recipeButtonProps, {navigation}: {navigation: any}) => {

    const onPress = () => {
        navigation.navigate("Recipe")
    }

    return (
        <View style={styles.root}>
            <Image style={styles.image} source={{ uri: item.image }} />

            <Pressable
             style={({pressed}) => [
                {backgroundColor: pressed ? '#D3D3D3' : 'white'},
                styles.nonImageContainer
            ]} 
            onPress={() => {
                onPress();
            }}>
            </Pressable>
        </View>
    );
};

export default RecipeButton;

Answer 1

我认为 RecipeButton 不在导航器的上下文中，所以它没有得到 navigation 属性。

尝试像这样使用 useNavigation() 钩子：

...
import { useNavigation } from '@react-navigation/native';
...


const RecipeButton = ({ item }: recipeButtonProps) => {
    const navigation = useNavigation();
    
    const onPress = () => {
        navigation.navigate("Recipe")
    }

    ...
};

export default RecipeButton;

TypeError: undefined is not an object (evaluating 'navigation.navigate'), cannot navigate from component placed on screen to another screen

TypeError: undefined is not an object (evaluating 'navigation.navigate'), cannot navigate from component placed on screen to another screen

typescript

react-native

react-native-navigation