React Navigation 5 参数传递的问题

Question

I am new to react-native. I am trying to pass some data along with the navigation after successful API fetch.

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

in the receiving screen, according to the react navigation 5 I used "route" keyword to get the attached params. First of all I used

const {firstname} = route.params

it didn't worked so I tried logging the output of the params.

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

output:

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

I am stuck in this since hours, help me thank you.

Answer 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/

Answer 2

try hook useNavigation , react-navigation Version: 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
}