React Navigation中屏幕间参数传递的常见陷阱与解决方案

navigation.navigate("ScreenName", { key1: value1, key2: value2 });

import { useNavigation } from "@react-navigation/native";
import { getCategoryById } from "../../data/API"; // 假设有此函数获取分类信息

const DrawerComponent = () => {
  const navigation = useNavigation();

  const handleNavigate = () => {
    // 假设 randomRecipe 已经获取，例如：
    const randomRecipe = {
      recipeID: "123",
      categoryID: "4",
      title: "美味沙拉",
      photosArray: ["uri1", "uri2"],
      // ... 其他食谱数据，可能包含一个名为 'category' 的属性
      category: "Salads" // 假设 randomRecipe 自身也包含一个 category 属性
    };

    // 根据 categoryID 获取分类对象
    const categoryObject = getCategoryById(randomRecipe.categoryID); // 假设返回 { id: "4", name: "沙拉" }
    const categoryName = categoryObject ? categoryObject.name : ""; // "沙拉"

    // 导航并传递参数
    navigation.navigate("Recipe", {
      item: randomRecipe, // 传递整个食谱对象
      category: categoryObject, // 传递分类对象
      title: categoryName // 传递分类名称作为标题
    });

    navigation.closeDrawer();
  };

  return (
    // ... UI 结构
    <Button title="给我一个随机食谱!!" onPress={handleNavigate} />
  );
};

export default DrawerComponent;

{
  "item": {
    "recipeID": "123",
    "categoryID": "4",
    "title": "美味沙拉",
    "photosArray": ["uri1", "uri2"],
    "category": "Salads"
  },
  "category": {
    "id": "4",
    "name": "沙拉"
  },
  "title": "沙拉"
}

export default function RecipeScreen(props) {
  const { navigation, route } = props;

  // 尝试直接访问 route.params.category
  const category = route.params.category; // 如果 categoryObject 在 Drawer.js 中为 undefined，则这里会是 undefined

  // 尝试访问 item.title，但 item 未在当前作用域定义
  // const title = item.title; // ❌ 错误：item 未定义

  // ... 其他组件逻辑
  // 在渲染部分可能出现错误：
  // {getCategoryName(item.categoryId).toUpperCase()} // ❌ 错误：item 未定义或 categoryId 不存在
}

import React, { useState, useEffect, useLayoutEffect, useRef } from "react";
import { View, Text, ScrollView, Image, TouchableHighlight } from "react-native";
import Carousel, { Pagination } from "react-native-snap-carousel";
import { viewportWidth } from "../constants/Dimensions"; // 假设有此常量
import { BackButton } from "../components/BackButton"; // 假设有此组件
import { getCategoryName } from "../../data/API"; // 假设有此函数获取分类名称
import styles from "./styles"; // 假设有样式文件

export default function RecipeScreen(props) {
  const { navigation, route } = props;

  // 从 route.params 中解构出 item 和 title
  // 注意：这里的 category 应该根据实际需要从 item 中获取，或者从 route.params 中直接获取
  // 假设我们想要的是 Drawer.js 中传递的 item 对象中的 category 属性
  const { item } = route.params; // 获取整个食谱 item 对象
  const passedTitle = route.params.title; // 获取 Drawer.js 传递的 title 字符串

  // 如果 Drawer.js 传递的 category (即 categoryObject) 是一个对象，并且你希望使用它
  const categoryObjectFromParams = route.params.category;

  // 如果你希望从 item 中获取 category 属性（例如 "Salads"）
  const categoryFromItem = item.category;

  // 根据实际需求决定使用哪个 category 变量
  // 比如，如果 getCategoryName 期望的是 categoryId，那么就用 item.categoryId
  // 如果希望显示分类名称，可以用 categoryObjectFromParams.name 或 categoryFromItem

  const [activeSlide, setActiveSlide] = useState(0);
  const [recipeData, setRecipeData] = useState(null);
  const slider1Ref = useRef();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerTransparent: true,
      headerLeft: () => (
        <BackButton
          onPress={() => {
            navigation.goBack();
          }}
        />
      ),
      headerRight: () => <View />,
    });
  }, []);

  const renderImage = ({ item: imageUri }) => ( // 注意这里的 item 是 Carousel 的 item
    <TouchableHighlight>
      <View style={styles.imageContainer}>
        <Image style={styles.image} source={{ uri: imageUri }} />
      </View>
    </TouchableHighlight>
  );

  useEffect(() => {
    fetch('http://10.11.55.7:111/rest', {
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(response => response.json())
      .then(data => {
        // 使用从路由参数中获取的 item.recipeID
        const matchedRecipe = data.find(recipe => recipe.recipeID === item.recipeID);
        if (matchedRecipe) {
          console.log(matchedRecipe.recipeID);
          setRecipeData(matchedRecipe);
        } else {
          console.log('No matching recipe found');
        }
      })
      .catch(error => {
        console.log('Fetch error:', error);
        // Handle the error here
      });
  }, [item.recipeID]); // 依赖项包含 item.recipeID 以确保在 item 变化时重新获取数据

  return (
    <ScrollView style={styles.container}>
      <View style={styles.carouselContainer}>
        <View style={styles.carousel}>
          <Carousel
            ref={slider1Ref}
            data={item.photosArray} // 使用从路由参数获取的 item.photosArray
            renderItem={renderImage}
            sliderWidth={viewportWidth}
            itemWidth={viewportWidth}
            inactiveSlideScale={1}
            inactiveSlideOpacity={1}
            firstItem={0}
            loop={false}
            autoplay={false}
            autoplayDelay={500}
            autoplayInterval={3000}
            onSnapToItem={(index) => setActiveSlide(index)} // 修正：应该更新为当前索引
          />
          <Pagination
            dotsLength={item.photosArray.length}
            activeDotIndex={activeSlide}
            containerStyle={styles.paginationContainer}
            dotColor="rgba(255, 255, 255, 0.92)"
            dotStyle={styles.paginationDot}
            inactiveDotColor="white"
            inactiveDotOpacity={0.4}
            inactiveDotScale={0.6}
            carouselRef={slider1Ref.current}
            tappableDots={!!slider1Ref.current}
          />
        </View>
      </View>
      <View style={styles.infoRecipeContainer}>
        <Text style={styles.infoRecipeName}>{item.title}</Text> {/* 使用 item.title */}
        <View style={styles.infoContainer}>
          {/* 根据实际需求选择使用哪个 category 变量 */}
          {categoryObjectFromParams && ( // 检查 categoryObjectFromParams 是否存在
            <Text style={styles.category}>
              {getCategoryName(item.categoryID).toUpperCase()} {/* 使用 item.categoryID */}
            </Text>
          )}
        </View>
      </View>
    </ScrollView>
  );
}