我一直在做一个食谱应用程序，它可以从一个API获取数据。该应用程序有一个搜索和搜索它本身的工作，但我不能打开食谱页面。打开工作在主页上，但不是在搜索。
我是李斯特。js

import React from "react";
import { Text, View, FlatList, SafeAreaView } from "react-native";
import styles from "../styles/styles";
import RecipeCard from "./RecipeCard";

const List = ({ searchPhrase, setClicked, data, navigation, screen }) => {
  const formattedSearchPhrase = searchPhrase.trim().replace(/\s/g, "").toUpperCase();

  const filteredData = data.filter((item) => {
    const formattedItemName = item.name?.trim().replace(/\s/g, "")?.toUpperCase();
    const formattedItemDetails = item.details?.trim().replace(/\s/g, "")?.toUpperCase();

    return formattedItemName?.includes(formattedSearchPhrase) || formattedItemDetails?.includes(formattedSearchPhrase);
  });

  const openRecipePageFromList = (recipe) => {     
    console.log('Navigating to screen:', recipe.screen); // Add this line to print the screen name to console
  
    if (screen === 'SearchScreen') {
      navigation.navigate('SearchRecipePageScreen', { recipe: recipe });
    } else if (screen === 'FavoritesScreen') {
      navigation.navigate('FavoritesRecipePageScreen', { recipe: recipe });
    }
};

  const renderItem = ({ item }) => {
    const itemName = item.name?.trim();
    const itemDetails = item.details?.trim();

    if (!itemName && !itemDetails) {
      return null;
    }

    return (
      <RecipeCard
        key={item.id}
        recipe={{ name: itemName, details: itemDetails, thumbnail_url: item.thumbnail_url }}
        screen={'SearchScreen'}
        onPress={() => openRecipePageFromList(item)}
      />
    );
  };

  return (
    <SafeAreaView style={styles.list__container}>
      <View
        onStartShouldSetResponder={() => {
          setClicked(false);
        }}
      >
        <FlatList
          data={filteredData}
          renderItem={renderItem}
          keyExtractor={(item) => item.id}
          extraData={searchPhrase}
        />
      </View>
    </SafeAreaView>
  );
};

export default List;

这是食谱卡。js在搜索中显示在列表中

import React, { useState, useEffect } from 'react';
import { Text, View, Image, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import styles from '../styles/styles';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function RecipeCard({ recipe, screen }) {
    const navigation = useNavigation();
    const [isFavorite, setIsFavorite] = useState(false);

    useEffect(() => {
        const checkFavorite = async () => {
            try {
                const storedFavorites = await AsyncStorage.getItem('favoriteRecipes');
                if (storedFavorites !== null) {
                    const parsedFavorites = JSON.parse(storedFavorites);
                    const found = parsedFavorites.some((favRecipe) => favRecipe.id === recipe.id);
                    setIsFavorite(found);
                }
            } catch (e) {
                console.log(e);
            }
        };
        checkFavorite();
    }, [recipe.id]);

    const openRecipePage = () => {
        if (screen === 'HomeScreen') {
            navigation.navigate('HomeRecipePageScreen', { recipe: recipe });
        } else if (screen === 'SearchScreen') {
            navigation.navigate('SearchRecipePageScreen', { recipe: recipe });
        } else if (screen === 'FavoritesScreen') {
            navigation.navigate('FavoritesRecipePageScreen', { recipe: recipe });
        }
    };

    const handlePress = async () => {
        try {
            const storedFavorites = await AsyncStorage.getItem('favoriteRecipes');
            let favoriteRecipes = [];
            if (storedFavorites !== null) {
                favoriteRecipes = JSON.parse(storedFavorites);
            }
            if (isFavorite) {
                const index = favoriteRecipes.findIndex((favRecipe) => favRecipe.id === recipe.id);
                if (index > -1) {
                    favoriteRecipes.splice(index, 1);
                }
            } else {
                favoriteRecipes.push(recipe);
            }
            setIsFavorite(!isFavorite);
            await AsyncStorage.setItem('favoriteRecipes', JSON.stringify(favoriteRecipes));
        } catch (e) {
            console.log(e);
        }
    };

    return (
        <View>
            <TouchableOpacity onPress={openRecipePage}>
                <View style={styles.recipeCardContainer}>
                    <View style={styles.imageContainer}>
                        <Image style={styles.image} source={{ uri: recipe.thumbnail_url }} />
                        <TouchableOpacity onPress={handlePress}>
                        <Icon
                            name={isFavorite ? 'heart' : 'heart-outline'}
                            size={24}
                            color={isFavorite ? 'red' : 'black'}
                            style={styles.heartIcon}
                        />
                    </TouchableOpacity>
                    </View>
                    <Text style={styles.recipeCardTextFrontPage}>{recipe.name}</Text>
                </View>
            </TouchableOpacity>
        </View>
    );
}

我仍然认为问题可能是代码无法找到我试图打开的食谱以及我试图打开它的位置，但我不知道如何修复它。