本文介绍了如何在 React Native 应用中，从一个屏幕将参数传递回之前的屏幕。重点在于使用 navigation.navigate 方法时，需要正确传递目标屏幕名称和参数。通过本文，你将学会如何避免 “TypeError: undefined is not an object (evaluating ‘props.route.params’)” 错误，并实现屏幕间的数据传递。
在 React Native 应用开发中，屏幕之间的数据传递是一个常见的需求。有时候，我们需要从当前屏幕将一些数据传递回之前的屏幕。本文将详细介绍如何实现这一功能，并避免常见的错误。
使用 navigation.navigate 传递参数
React Navigation 库提供了 navigation.navigate 方法来实现屏幕之间的跳转和参数传递。该方法接受两个参数：
name: 目标屏幕的名称，该名称必须是在导航器中已经定义过的。params: 一个对象，包含了要传递给目标屏幕的参数。
示例代码
假设我们有两个屏幕：HomeScreen 和 SavedRoutesScreen。我们希望从 SavedRoutesScreen 跳转回 HomeScreen，并传递一个名为 defined 的参数。
HomeScreen 的代码如下：
import React, { useEffect } from 'react';import { View, Text } from 'react-native';function HomeScreen(props: { route: any, navigation: any,}) { useEffect(() => { if (props.route.params?.defined) { console.log('Received parameter: ', props.route.params?.defined); } }, [props.route.params?.defined]); return ( Home Screen );}export default HomeScreen;
SavedRoutesScreen 的代码如下：
import React from 'react';import { View, Button } from 'react-native';function SavedRoutesScreen(props: { navigation: any }) { function handleGo() { props.navigation.navigate("Home", { defined: true }); } return ( );}export default SavedRoutesScreen;
在 SavedRoutesScreen 中，handleGo 函数使用 props.navigation.navigate(“Home”, { defined: true }) 将用户导航回 HomeScreen 并传递了参数 { defined: true }。
在 HomeScreen 中，useEffect 钩子用于监听 props.route.params?.defined 的变化。当 SavedRoutesScreen 传递了 defined 参数时，useEffect 会执行，并打印接收到的参数值。
避免 “TypeError: undefined is not an object (evaluating ‘props.route.params’)” 错误
这个错误通常发生在尝试访问 props.route.params 之前，该对象尚未被初始化或传递。 确保以下几点：
正确传递参数： 使用 navigation.navigate(name, params) 格式正确传递参数。初始值处理： 在 HomeScreen 中，使用可选链操作符 ?. 来安全地访问 props.route.params?.defined。这样可以避免在 props.route.params 为 undefined 时出现错误。依赖项: useEffect 的依赖项数组包含了 props.route.params?.defined。这确保了当参数 defined 的值发生变化时，useEffect 会重新执行。
总结
通过本文，我们学习了如何在 React Native 中从一个屏幕将参数传递回之前的屏幕。关键在于使用 navigation.navigate 方法时，需要正确传递目标屏幕名称和参数，并使用可选链操作符来安全地访问 props.route.params。 通过遵循这些步骤，你可以轻松地实现屏幕之间的数据传递，并避免常见的错误。
以上就是将参数传递回 React Native 中的前一个屏幕的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527341.html
微信扫一扫 
支付宝扫一扫 
![Go语言接口与切片：如何识别和操作[]interface{}](https://cdn.chuangxiangniao.com/www/2025/12/176369856569294-1.jpg?imageMogr2/crop/480x300/gravity/center)
