React Navigation中跨屏幕传递参数的最佳实践

// Drawer.js
import { useNavigation } from '@react-navigation/native';
import { getCategoryById } from "../../data/API"; // 假设这是一个获取分类的函数

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

  const handleNavigate = () => {
    const randomRecipe = {
      recipeID: '123',
      categoryID: '4',
      photosArray: ['url1', 'url2'],
      // ... 其他食谱数据
    }; // 模拟的随机食谱对象

    const category = getCategoryById(randomRecipe.categoryID); // 获取分类对象
    const title = category ? category.name : ""; // 获取分类名称作为标题

    // 尝试传递参数
    navigation.navigate("Recipe", { item: randomRecipe, category, title });

    navigation.closeDrawer();
  };

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

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

  // 尝试直接从route.params获取category
  const category = route.params.category; // 这里可能出现 undefined

  // 假设item是食谱对象
  const item = route.params.item;

  // 假设标题也是直接传递的
  const title = route.params.title; // 假设这里也能获取到

  // ... 后续逻辑使用 category, item, title
}

// Drawer.js (优化后)
import { useNavigation } from '@react-navigation/native';
import { getCategoryById } from "../../data/API";

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

  const handleNavigate = () => {
    const randomRecipeBase = {
      recipeID: '123',
      categoryID: '4',
      photosArray: ['url1', 'url2'],
      // ... 其他食谱数据
    };

    const recipeCategory = getCategoryById(randomRecipeBase.categoryID); // 获取分类对象
    const recipeTitle = recipeCategory ? recipeCategory.name : ""; // 获取分类名称作为标题

    // 将分类信息整合到食谱对象中
    const fullRecipeItem = {
      ...randomRecipeBase,
      category: recipeCategory, // 将完整的分类对象放入item中
      title: recipeTitle,      // 也可以将标题放入item中，保持一致性
    };

    // 导航时只传递一个 item 对象
    navigation.navigate("Recipe", { item: fullRecipeItem });

    navigation.closeDrawer();
  };

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

// RecipeScreen.js (修正后)
export default function RecipeScreen(props) {
  const { navigation, route } = props;

  // 从 route.params 中获取完整的 item 对象
  const { item } = route.params;

  // 从 item 对象中解构出 category 和 title
  // 确保 item 存在，以避免解构 undefined 错误
  const category = item?.category;
  const title = item?.title; // 或者 item?.name, 取决于 item 内部结构

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

  // ... (useLayoutEffect, renderImage, useEffect等原有逻辑)

  useEffect(() => {
    // 假设您的API调用依赖于item.recipeID
    if (item && item.recipeID) {
      fetch('http://10.11.55.7:111/rest', {
        headers: { 'Content-Type': 'application/json' }
      })
        .then(response => response.json())
        .then(data => {
          const matchedRecipe = data.find(recipe => recipe.recipeID === item.recipeID);
          if (matchedRecipe) {
            setRecipeData(matchedRecipe);
          } else {
            console.log('No matching recipe found');
          }
        })
        .catch(error => {
          console.log('Fetch error:', error);
        });
    }
  }, [item]); // 依赖项改为 item，当 item 变化时重新获取数据

  return (
    <ScrollView style={styles.container}>
      <View style={styles.carouselContainer}>
        {/* Carousel 组件可能需要 item.photosArray */}
        <Carousel
          // ... 其他props
          data={item?.photosArray || []} // 确保数据不为 undefined
          renderItem={renderImage}
          // ...
        />
        <Pagination
          dotsLength={item?.photosArray?.length || 0} // 确保长度不为 undefined
          activeDotIndex={activeSlide}
          // ...
        />
      </View>
      <View style={styles.infoRecipeContainer}>
        <Text style={styles.infoRecipeName}>{title || item?.title || '未知食谱'}</Text> {/* 使用解构出的title */}
        <View style={styles.infoContainer}>
          {category && ( // 确保 category 存在才渲染
            <Text style={styles.category}>
              {category.name?.toUpperCase() || '未知分类'} {/* 访问 category 对象的 name 属性 */}
            </Text>
          )}
        </View>
        {/* 其他食谱详情内容 */}
      </View>
    </ScrollView>
  );
}