将参数传递回 React Native 中的前一个屏幕

本文介绍了如何在 React Native 应用中，从一个屏幕将参数传递回之前的屏幕。重点在于使用 navigation.navigate 方法时，需要正确传递目标屏幕名称和参数。通过本文，你将学会如何避免 "TypeError: undefined is not an object (evaluating 'props.route.params')" 错误，并实现屏幕间的数据传递。

在 React Native 应用开发中，屏幕之间的数据传递是一个常见的需求。有时候，我们需要从当前屏幕将一些数据传递回之前的屏幕。本文将详细介绍如何实现这一功能，并避免常见的错误。

使用 navigation.navigate 传递参数

React Navigation 库提供了 navigation.navigate 方法来实现屏幕之间的跳转和参数传递。该方法接受两个参数：

1. name: 目标屏幕的名称，该名称必须是在导航器中已经定义过的。
2. 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 的代码如下：

轻幕

轻幕是一个综合性短视频制作平台，诗词、故事、小说等一键成片转视频，让内容传播更生动！

36

查看详情

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 之前，该对象尚未被初始化或传递。 确保以下几点：

1. 正确传递参数： 使用 navigation.navigate(name, params) 格式正确传递参数。
2. 初始值处理： 在 HomeScreen 中，使用可选链操作符 ?. 来安全地访问 props.route.params?.defined。这样可以避免在 props.route.params 为 undefined 时出现错误。
3. 依赖项: useEffect 的依赖项数组包含了 props.route.params?.defined。这确保了当参数 defined 的值发生变化时，useEffect 会重新执行。

总结

通过本文，我们学习了如何在 React Native 中从一个屏幕将参数传递回之前的屏幕。关键在于使用 navigation.navigate 方法时，需要正确传递目标屏幕名称和参数，并使用可选链操作符来安全地访问 props.route.params。 通过遵循这些步骤，你可以轻松地实现屏幕之间的数据传递，并避免常见的错误。

以上就是将参数传递回 React Native 中的前一个屏幕的详细内容，更多请关注php中文网其它相关文章！