React Native函数组件中如何获取导航路由参数

你现有类组件通过this.props.route.params获取跳转参数的逻辑已经跑通，函数组件因为没有this上下文，仅需调整参数获取的写法即可，无需修改登录页的传参逻辑，参数来源和类组件完全一致。

常用实现方式 #

1. 直接从组件入参的props解构获取 #

函数组件和类组件一样，会被导航系统自动注入带route属性的props，只需要把类组件里this.props对应的部分，替换成函数入参拿到的props即可：

// 基础写法
function TargetFuncPage(props) {
  // 对齐类组件的取值逻辑，仅去掉this引用
  const leadTagNumber = props.route.params.leadTagNumber;

  // 页面其他逻辑...
}

可以优化为更简洁的解构写法，减少冗余代码：

// 解构简化写法
function TargetFuncPage({ route }) {
  // 直接从route对象的params里解构需要的字段
  const { leadTagNumber } = route.params;

  // 页面其他逻辑...
}

2. 使用导航内置的useRoute Hook获取 #

如果不想逐层解构props，可以直接用React Navigation提供的专门Hook获取route对象，这也是函数组件场景下最常用的写法：

1. 从导航核心包引入useRoute Hook
2. 在组件顶层直接调用拿到route实例，再读取对应参数

// 引入Hook
import { useRoute } from '@react-navigation/native';

function TargetFuncPage() {
  // 调用Hook直接获取route对象
  const route = useRoute();
  // 取值逻辑和类组件完全一致
  const { leadTagNumber } = route.params;

  // 页面其他逻辑...
}

补充提醒

• 两种实现方式没有能力或性能差异，完全可以根据自己的编码习惯选择，新开发的函数组件页面使用Hook写法会更灵活，后续做嵌套组件时不需要逐层透传props
• 你目前是从登录页直接跳转至注册在导航栈的函数组件页，上述两种方式都可以正常获取到传参，不存在参数读取不到的问题，拿到的params内容和类组件里获取的完全同源

内容的提问来源于stack exchange，提问作者user14877357