Question

我正在尝试作为初学者的项目来做，但是我不断收到错误消息： 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;

有人可以帮我吗？

Answer 1

似乎您的ResultList组件未收到navigation道具。如果ResultList是屏幕的子组件（您的屏幕是您在createStackNavigator中声明的屏幕），则应在屏幕组件渲染<ResultList navigation={navigation} ...otherProps />

中手动添加此道具

我得到了错误； “'navigation.navigate'未定义”或navigation.navigate不是方法（本机反应）

1 个答案: