React Native使用React Navigation时route.params下属性为undefined怎么办

问题原因 #

你调用navigation.navigate、navigation.push传递参数时多嵌套了一层params字段。React Navigation 5.x的传参规则为：navigate方法的第二个参数直接就是要传递的参数对象，不需要额外包裹params字段。
你当前的传参写法：

navigation.navigate('Details', {
  params: {
    mathNumber: Math.floor(Math.random() * 999),
  },
})

会导致route.params的实际结构为{ params: { mathNumber: xxx } }，因此直接取route.params.mathNumber返回undefined，和你观察到的打印结果一致。

修复方案（推荐） #

调整传参写法，去掉多余的params嵌套即可：

// HomeScreen中跳转逻辑修改
navigation.navigate('Details', {
  mathNumber: Math.floor(Math.random() * 999),
})

// DetailsScreen中再次跳转的逻辑也同步修改
navigation.push('Details', {
  mathNumber: Math.floor(Math.random() * 999),
})

修改完成后，你原本写的const { mathNumber } = route.params就可以正常获取到参数值，也能正常渲染到页面上，每次跳转都会生成新的随机数展示。

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