TypeError：未定义不是对象（评估“navigation.navigate”），无法从放置在屏幕上的组件导航到另一个屏幕

Posted 2023-03-13

【中文标题】TypeError：未定义不是对象（评估“navigation.navigate”），无法从放置在屏幕上的组件导航到另一个屏幕

【英文标题】：TypeError: undefined is not an object (evaluating 'navigation.navigate'), cannot navigate from component placed on screen to another screen

【发布时间】：2021-11-09 23:03:13

【问题描述】：

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

主页：

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;

【问题讨论】：

尝试像<FlatList style=width:'100%' data=recipes renderItem=( item ) => <RecipeButton item=item navigation=navigation /> />这样向下传递导航属性

它不起作用类型' item: id: string;用户： id：字符串；名称：字符串；图片：字符串； ;名称：字符串；图片：字符串；配方：字符串；必需：字符串；评级：数字；评分计数：数字；需要时间：字符串；难度：字符串； ;导航：任何； ' 不可分配给类型 'IntrinsicAttributes & recipeButtonProps'。类型“IntrinsicAttributes & recipeButtonProps”上不存在属性“导航”。

【参考方案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;