使用react-navigation实现双页面时遇isMounted弃用警告求助

嘿，我来帮你搞定这个烦人的警告问题～

首先，这个警告出现的原因很明确：你用的react-navigation@1.5.11是比较旧的版本，它内部的一些代码还在使用React 16+已经弃用的isMounted()方法，尤其是和react@16.3.1搭配时，就会触发这个提示。下面给你几个可行的解决办法：

1. 优先升级react-navigation（根本解决） #

旧版本的react-navigation确实存在这个兼容性问题，升级到兼容你当前React Native版本的新版本就能彻底解决。考虑到你的react-native@0.55.2，推荐安装react-navigation@2.18.3（这个版本和RN0.55.x兼容性很好）：

• 先卸载旧版本：

  npm uninstall react-navigation --save
  

• 安装指定版本：

  npm install react-navigation@2.18.3 --save
  

升级后记得重新运行项目，这个警告应该就消失了。

2. 临时忽略警告（快速治标） #

如果暂时不想升级，可以在项目的入口文件（比如App.js或者index.js）里添加代码，忽略这个特定警告：

import { YellowBox } from 'react-native';
// 忽略isMounted弃用的警告
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated']);

不过这个方法只是隐藏警告，并没有解决根源问题，还是推荐优先升级。

3. 检查自己的代码（规范写法） #

另外，记得检查你自己的Login.js或者其他类组件里，有没有手动使用isMounted()方法。如果有的话，一定要改掉！React官方早就不推荐用这个方法了，正确的做法是在componentWillUnmount生命周期里清理所有订阅、未完成的网络请求、事件监听器等，避免内存泄漏。比如：

componentWillUnmount() {
  // 取消网络请求
  if (this.cancelToken) {
    this.cancelToken.cancel('组件已卸载，取消请求');
  }
  // 移除事件监听器
  window.removeEventListener('resize', this.handleResize);
}

总结一下，最稳妥的方式是升级react-navigation到兼容的新版本，同时规范自己的组件写法，避免使用已弃用的API。

内容的提问来源于stack exchange，提问作者Javascript Hupp Technologies