React Navigation 5 参数传递的问题答案

【问题标题】：Problem with React Navigation 5 params passingReact Navigation 5 参数传递的问题
【发布时间】：2020-09-18 07:58:50
【问题描述】：

我是 react-native 的新手。在成功获取 API 后，我正在尝试将一些数据与导航一起传递。

 if (response.status === 200) {
    navigation.navigate(EditProfile, {
      password: password,
      address: 'Address',
      firstname: 'John',
      lastname: 'Doe',
    });
  }

在接收屏幕中，根据反应导航 5 我使用“路线”关键字来获取附加的参数。首先我用过

const {firstname} = route.params

它不起作用，所以我尝试记录参数的输出。

const EditProfile = ({route}) => {
console.log(route.params);
console.log(route);
return(someJSX)

输出：

LOG      undefined
LOG      {"key": "EditProfile-eaMKo66zwdmYhxnS-uOdr", "name": "EditProfile", "params": undefined}

几个小时以来我一直陷入困境，请帮助我谢谢。

【问题讨论】：

标签： javascript reactjs react-native navigation react-navigation

【解决方案1】：

// set navigation params
const navigation = this.props.navigation;
        navigation.navigate(EditProfile, {
            password: password,
            address: 'Address',
            firstname: 'John',
            lastname: 'Doe',
        });


 
//receive navigation objects: try this
     this.props.navigation.getParam('password')
 or 
 // Access the  otherParam via Destructuring assignment
    const { otherParam } = this.props.route.params;

https://www.positronx.io/react-native-stack-navigator-passing-getting-params-to-screen/

【讨论】：

谢谢先生，但它仍然无法正常工作，我正在使用 React 导航 5，您的解决方案适用于以前的版本。我也为此尝试了等效的功能组件，但仍然没有帮助。
你参考了这个链接吗？ “reactnavigation.org/docs/navigation-prop”。请参考navigation.navigate(name, params)“snack”下。希望对你有帮助..

【解决方案2】：

尝试hook useNavigation，react-navigation 版本：5.x

// File SomeComponent.js
import { useNavigation } from '@react-navigation/core';

const SomeComponent = () => {
  const navigation = useNavigation();

  navigation.navigate('EditProfile', {
    password: password,
    address: 'Address',
    firstname: 'John',
    lastname: 'Doe',
  });
}

// File EditProfile.js
const EditProfile = ({ route }) => {
  const { password, address, firstname, lastname } = route.params;
  // do something with these values
}

【讨论】：

您没有将 EditProfile 作为文本传递。确保在 NavigationContainer 中有这个：