获取“未定义"使用 react-navigation 版本 5 传递参数时? [英] Getting "undefined" when passing params using react-navigation version 5?

问题描述

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

TLDR: I am not getting a param passed from one screen to the next using route.params in react-navigation 5.

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

I just updated from react-navigation version 4 to version 5. I am now having problems passing params between screens. in the screen I am navigating from I use an onPress() to navigate to the next screen and pass a string "son" in the parameter "loveOne".

从这里的第一个屏幕是代码的重要部分:

from the first screen here are the important bits of code:

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"中，我执行以下操作:

in the called screen "RegistrationPageThree" I do the following:

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.

推荐答案

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

The way you are passing params is used for nested navigators, In your case with a direct navigation you just have to change this line

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

您未定义的原因是您的变量包含在 params 中

The reason you are getting undefined is that your variable is wrapped inside params

这篇关于获取“未定义"使用 react-navigation 版本 5 传递参数时?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！