使用反应导航版本 5 传递参数时得到 "undefined"？

Question

TLDR：我没有在 react-navigation 5 中使用 route.params 将参数从一个屏幕传递到下一个屏幕。

我刚刚从 react-navigation 版本 4 更新到版本 5。我现在在屏幕之间传递参数时遇到问题。在我导航的屏幕中我使用 onPress() 导航到下一个屏幕并在参数 "loveOne".

中传递一个字符串 "son"

第一个屏幕是重要的代码：

import { useNavigation } from '@react-navigation/native';
.
.
.
class RegistrationPageTwo extends React.Component {
.
.
.
    render(){
        const { radiochecked } = this.state;
        const { navigation } = this.props;
.
.
.
        onPress={() => {navigation.navigate('RegistrationThree', { params: { loveOne: "son" },})}}
.
.
.
// Wrap and export
export default function(props) {
    const navigation = useNavigation();

    return <RegistrationPageTwo {...props} navigation={navigation} />;
}

在调用的屏幕中 "RegistrationPageThree" 我执行以下操作：

import { useNavigation, useRoute } from '@react-navigation/native';
.
.
.
    render(){
        const { route } = this.props
        const { loveOne } = route.params;
        console.log("entering render section: " + loveOne );
.
.
.
// Wrap and export
export default function(props) {
    const route = useRoute();

    return <RegistrationPageThree {...props} route={ route } />;
  } 

I am getting "undefined" for loveOne in the consolelog statement.

I have been over the react-navigation 5 documentation and can't seem to pull out what I am doing wrong.
Thanks for the help!

Garry O.

Answer 1

您传递参数的方式用于嵌套导航器，在您使用直接导航的情况下，您只需更改此行

onPress={() => {navigation.navigate('RegistrationThree', {  loveOne: "son" })}}

你得到未定义的原因是你的变量被包装在参数中

使用反应导航版本 5 传递参数时得到 "undefined"？

Getting "undefined" when passing params using react-navigation version 5?

react-native

react-navigation

react-navigation-v5