React Native Navigation 4.x跨页面传参时props变为null如何解决？

问题原因 #

你遇到的这个问题是React Navigation 3.x的默认路由跳转逻辑导致的，核心原因如下：

• navigation.navigate() 方法的默认行为是：如果目标路由（也就是你的Dashboard页）已经存在于当前导航栈中，会直接返回到这个已经创建的页面实例，而不是新生成一个页面实例。
• 构造函数只会在组件第一次初始化的时候执行一次，已经存在的Dashboard页不会再触发构造函数执行，所以你在构造函数里写的参数获取逻辑不会重新运行，拿到的还是页面第一次创建时的旧值（如果第一次创建时没传对应参数，就是null）。
• 你之前的页面传参正常，是因为那些页面之前都不存在于导航栈中，每次跳转都是新建实例，构造函数会正常执行拿参数。

排查验证方法 #

你可以先做个简单测试确认问题：把openDashboardHouses函数里的navigate改成push，push方法不管目标路由是否存在都会强制新建页面实例压入栈：

context.props.navigation.push(dashboardHousesRoute, {user: user, house: house});

如果改完之后能正常拿到参数，就可以确定是页面复用导致的问题。

解决方案 #

根据你的业务需求选择对应方案即可：

方案1：允许新建Dashboard实例 #

直接用上面的push替换navigate即可，每次跳转都打开新的Dashboard页，构造函数会正常执行拿最新参数。如果你的业务逻辑允许多个Dashboard页堆叠，这个方案最简单。

方案2：需要复用已有的Dashboard实例 #

如果你不想新建页面，希望复用已有的Dashboard实例，就把参数获取逻辑从构造函数移到页面聚焦的回调里：

1. 在Dashboard页的componentDidMount生命周期里监听页面聚焦事件：

componentDidMount() {
  this._unsubscribe = this.props.navigation.addListener('willFocus', () => {
    // 每次页面获得焦点时重新获取参数更新state
    this.setState({
      user: getUserFromNavigationProps(this),
      created_house: getHouseFromNavigationProps(this)
    })
  })
}

2. 在componentWillUnmount里取消监听避免内存泄漏：

componentWillUnmount() {
  this._unsubscribe?.()
}

其他低概率排查点 #

如果改完push还是拿不到参数，可以检查这两个点：

• 直接在Dashboard构造函数里打印console.log(this.props.navigation.state.params)，确认参数是否真的没有传递过来，排除getUserFromNavigationProps等辅助函数或者KEY定义错误的问题
• 如果Dashboard是嵌套在Tab导航、抽屉导航里的子路由，需要从父导航器拿参数：可以用this.props.navigation.dangerouslyGetParent()?.getParam(USER_KEY)尝试获取

内容的提问来源于stack exchange，提问作者Fabio R.