React导航5参数传递的问题

Question

我是第一次接触react-native。我试图在成功获取API后将一些数据与导航一起传递。

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

在接收屏幕中，根据react导航5，我使用了"route“关键字来获取附加的参数。首先，我使用了

const {firstname} = route.params

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

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

输出：

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

我被困在这里好几个小时了，帮我一下谢谢。

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

试用hook useNavigation，react-导航版本: 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
}