我收到错误消息； “'navigation.navigate' 未定义”或 navigation.navigate 不是方法（反应原生）答案

【问题标题】：I am getting the error; "'navigation.navigate' is undefined " or navigation.navigate is not a method (react native)我收到错误消息； “'navigation.navigate' 未定义”或 navigation.navigate 不是方法（反应原生）
【发布时间】：2020-10-14 12:27:09
【问题描述】：

我正在尝试将其作为初学者的项目，但我不断收到错误消息： navigation.navigate 不是函数。（在'navigation.navigate('Recipe')'中，'navigation.navigate 是未定义的） 当我单击按钮时，我只是想导航到一个页面，但我一直收到错误消息。我尝试浏览文档和控制台日志记录“导航”，但它只是显示未定义。

这是我的 app.js：

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Index from './src/screens/Index';
import AddData from './src/components/AddData'
import recipescreen from './src/components/RecipeScreen'

const navigator = createStackNavigator({

  Index: Index,
  Add: AddData,
  Recipe: recipescreen

},{
    initialRouteName: 'Index',
    title: 'RecipesHub'
});

export default createAppContainer(navigator);

和结果列表组件：

import React from "react";
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  TouchableOpacity,
  Alert,
  Modal,
  Button,
} from "react-native";
import ResultsDetails from "../components/ResultsDetail";
import recipescreen from "../components/RecipeScreen";
import * as axios from "axios";

const ResultList = ({ title, recipes, hasError, navigation }) => {
  const deleteRecipe = async (id) => {
    const response = await fetch(
      "https://recipehub-291212.ew.r.appspot.com/rest/Recipeservice/deleterecipe/" +
        id,
      {
        method: "DELETE",
      }
    );
  };

  const createTwoButtonAlert = (param) =>
    Alert.alert(
      "You are going to delete this recipe",
      "Are you sure you want to delete?",
      [
        {
          text: "Cancel",
          onPress: () => {},
          style: "cancel",
        },
        { text: "OK", onPress: () => deleteRecipe(param.id) },
      ],
      { cancelable: false }
    );

  return (
    <View style={{ marginTop: 50 }}>
      <Text>{title} </Text>
      <Text>{hasError} </Text>
      <FlatList
        horizontal={true}
        data={recipes}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => {
          return (
            <TouchableOpacity onLongPress={() => createTwoButtonAlert(item)}>
              <View>
                <View>
                <ResultsDetails result={item} />
                </View>
                <View>
                  <Button title = "recipe page" onPress = {(navigation)=>navigation.navigate('Recipe')}/>
                </View>
              </View>
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({});

export default ResultList;

但是当我按下按钮时，它给了我错误。

食谱页面只是一个带有视图和文本的基本页面：

import React from 'react';
import {Text, View, Button, StyleSheet} from 'react-native'
import recipes from './getRecipes';

class recipescreen extends React.Component{
render(){
    return(
    
        <View> 
        <Text>This is the recipe page</Text>
        </View>
    )
}
};

const styles = StyleSheet.create({

});

export default recipescreen;

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript react-native navigation expo

【解决方案1】：

您的 ResultList 组件似乎没有收到 navigation 属性。如果ResultList 是屏幕的子组件（您的屏幕是您在createStackNavigator 中声明的），您应该在屏幕组件渲染<ResultList navigation={navigation} ...otherProps /> 中手动添加此道具@

【讨论】：