React Navigation：掌握屏幕间参数传递的正确姿势

在使用 React Navigation 进行屏幕导航时，开发者常遇到传递的参数在目标屏幕变为 `undefined` 的问题。本文将深入探讨 React Navigation 中 `route.params` 的工作机制，特别是当传递复杂对象时如何正确地解构参数。通过具体的代码示例，我们将展示如何从 `Drawer` 组件向 `RecipeScreen` 正确传递并访问嵌套参数，从而解决 `category` 属性未定义的常见错误，确保数据流的顺畅与应用的稳定性。

1. React Navigation 参数传递概述

React Navigation 是 React Native 应用中实现导航的核心库。它允许我们在不同屏幕之间进行切换，并在此过程中传递数据（即 props）。正确地传递和接收这些 props 对于构建功能完善的移动应用至关重要。

在 React Navigation 中，通过 navigation.navigate(routeName, params) 方法进行导航时，第二个参数 params 是一个包含要传递给目标屏幕的数据的对象。目标屏幕可以通过其 route prop 访问这些参数，具体路径是 route.params。

2. 问题描述：参数 undefined 的困境

开发者在使用 navigation.navigate() 方法传递参数时，有时会发现目标屏幕无法正确接收到这些参数，或者某些嵌套属性显示为 undefined。

考虑以下场景：一个抽屉菜单组件 Drawer 包含一个按钮，点击后需要导航到 RecipeScreen，并传递一个随机食谱对象 (randomRecipe) 及其对应的分类 (category) 和标题 (title)。

白瓜AI

白瓜AI，一个免费图文AI创作工具，支持 AI 仿写，图文生成，敏感词检测，图片去水印等等。

下载

Drawer.js 中的导航逻辑示例：

import React, { useEffect } from "react";
import { View, Button } from "react-native"; // 假设 MenuButton 是一个 Button
import { useNavigation } from "@react-navigation/native";
// import { getCategoryById } from "../../data/API"; // 假设有此函数

const getCategoryById = (id) => {
  // 模拟数据获取
  const categories = {
    1: { name: "Desserts" },
    2: { name: "Main Courses" },
  };
  return categories[id];
};

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

  useEffect(() => {
    // 可以在此获取随机食谱或其他初始化数据
  }, []);

  const handleNavigate = () => {
    // 模拟一个随机食谱对象
    const randomRecipe = {
      recipeId: "someId123",
      categoryID: 1, // 假设食谱有分类ID
      photosArray: ["https://example.com/photo1.jpg"],
      title: "美味甜点", // 假设食谱本身也有标题
    };
    const category = getCategoryById(randomRecipe.categoryID);
    const title = category ? category.name : ""; // 这里的title是分类名

    // 导航到 Recipe 屏幕，传递 item (食谱对象), category 和 title
    navigation.navigate("Recipe", { item: randomRecipe, category, title });

    navigation.closeDrawer();
  };

  return (
    
      
    
  );
};

export default Drawer;

在 RecipeScreen 中，尝试通过 route.params.category 访问 category 时，却发现它为 undefined，导致依赖该值的后续渲染逻辑（如 getCategoryName(item.categoryId).toUpperCase()）报错。

RecipeScreen.js 中的错误访问方式示例：

import React, { useState, useRef, useLayoutEffect, useEffect } from "react";
import { View, Text, ScrollView, Image, TouchableHighlight, Dimensions } from "react-native";
// import Carousel from 'react-native-snap-carousel'; // 假设已安装
// import { Pagination } from 'react-native-snap-carousel'; // 假设已安装
// import BackButton from '../../components/BackButton'; // 假设有此组件
// import { getCategoryName } from '../../data/API'; // 假设有此函数

const { width: viewportWidth } = Dimensions.get('window');

// 模拟函数和组件
const Carousel = ({ data, renderItem, sliderWidth, itemWidth, inactiveSlideScale, inactiveSlideOpacity, firstItem, loop, autoplay, autoplayDelay, autoplayInterval, onSnapToItem }) => {
    return {data.map((item, index) => renderItem({ item, index }))};
};
const Pagination = ({ dotsLength, activeDotIndex, containerStyle, dotColor, dotStyle, inactiveDotColor, inactiveDotOpacity, inactiveDotScale, carouselRef, tappableDots }) => {
    return Page {activeDotIndex + 1}/{dotsLength};
};
const BackButton = ({ onPress }) => ;
const getCategoryName = (id) => {
    const categories = {
        1: { name: "Desserts" },
        2: { name: "Main Courses" },
    };
    return categories[id] ? categories[id].name : "Unknown";
};

const styles = { /* 样式定义 */
    container: { flex: 1 },
    carouselContainer: { height: 200 },
    carousel: {},
    imageContainer: { width: viewportWidth, height: 200 },
    image: { width: '100%', height: '100%' },
    paginationContainer: { position: 'absolute', bottom: 0, width: '100%', backgroundColor: 'rgba(0,0,0,0.5)' },
    paginationDot: { width: 8, height: 8, borderRadius: 4, marginHorizontal: 0 },
    infoRecipeContainer: { padding: 20 },
    infoRecipeName: { fontSize: 24, fontWeight: 'bold' },
    infoContainer: { marginTop: 10 },
    category: { fontSize: 16, color: 'gray' }
};


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

  // 错误访问方式：此处 category 为 undefined
  // const category = route.params.category;

  // 假设 item 应该从 route.params 中获取
  const item = route.params?.item || {}; // 安全地获取 item

  // const title = item.title; // 这里的 title 可能是食谱自身的标题，而非分类标题

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

  const slider1Ref = useRef();

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

  const renderImage = ({ item }) => (
    
      
        
      
    
  );

  useEffect(() => {
    // 模拟数据获取
    // fetch('http://10.11.55.7:111/rest', { /* ... */ })
    //   .then(response => response.json())
    //   .then(data => {
    //     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);
    //   });
  }, []);

  return (
    
      
        {/* Carousel 和 Pagination 组件 */}
      
      
        {item.title}
        
          {/* 这里会报错，因为 category 为 undefined */}
          {/* {category && (
            
              {getCategoryName(item.categoryId).toUpperCase()}
            
          )} */}
        
      
    
  );
}

3. 分析与解决方案：正确解构 route.params

当您调用 navigation.navigate("Recipe", { item: randomRecipe, category, title }); 时，