React Navigation路由unmountOnBlur未清理，如何重置Drawer跳转返回的路由参数

问题核心原因 #

Drawer导航默认会复用已创建的页面实例，从其他页面跳转回来时不会主动清除之前传递的路由参数；componentWillUnmount中调用reset无效是因为页面卸载阶段导航上下文已经发生变更，此时调用导航操作属于非法异步操作。

可行解决方案 #

方案1：页面失焦时自动清空参数 #

在类组件的componentDidMount中注册blur失焦监听器，页面离开时直接清空指定参数，无需重置整个路由栈，性能开销最小：

componentDidMount() {
  // 注册页面失焦监听器
  this.blurListener = this.props.navigation.addListener('blur', () => {
    // 重置order参数为null/undefined
    this.props.navigation.setParams({
      order: null
    });
  });
}

componentWillUnmount() {
  // 组件卸载前移除监听器，避免内存泄漏
  if (this.blurListener) this.blurListener();
}

方案2：修改Drawer跳转逻辑，强制重置参数 #

自定义Drawer菜单项的点击逻辑，每次从Drawer跳转至页面2时显式传入空参数，覆盖之前的残留参数：

// Drawer路由配置处修改
<Drawer.Screen
  name="Screen 2"
  component={OrderScreen}
  listeners={{
    drawerItemPress: (e) => {
      e.preventDefault();
      // 跳转时显式传入空order，覆盖旧参数
      navigation.navigate('Screen 2', { order: undefined });
    }
  }}
/>

方案3：完全重置路由栈 #

如果需要彻底销毁旧的页面实例，可在blur监听器中调用reset方法，指定全新的路由栈配置：

// blur监听器内调用reset
this.props.navigation.reset({
  index: 0,
  routes: [{ name: 'Screen 2', params: {} }]
});

内容的提问来源于stack exchange，提问作者Gustavomgu.developer