使用react-navigation版本5传递参数时获得“未定义”？

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" })}}

得到未定义的原因是您的变量包装在params中