本文介绍了如何在 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 (
<View>
<Text>Home Screen</Text>
</View>
);
}
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 (
<View>
<Button title="Go to Home" onPress={handleGo} />
</View>
);
}
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。 通过遵循这些步骤，你可以轻松地实现屏幕之间的数据传递，并避免常见的错误。
