Question

我正在使用react-navigation实现2个屏幕。但是在导航到第二页时我收到了以下警告：

警告：isMounted（...）在普通Javascript类中已弃用。相反，请确保清除componentWillUnmount中的订阅和挂起请求，以防止内存泄漏。

版本：

react：16.3.1
react-native：0.55.2
react-navigation：1.5.11
util：0.10.3

Login.js

import React, { Component } from 'react';
import { Text, View, Image, TextInput, TouchableOpacity } from 'react-native';
import styles from "./styles";

export default class Login extends Component {
    constructor(props) {
    super(props);
}

render() {
    const { navigate } = this.props.navigation;     
    return (
        <View style={styles.container}>         
            <View style={styles.formContainer}>                 
                <TouchableOpacity style={styles.button} onPress={()=> navigate('Home')} >
                    <Text style={styles.buttonText}>LOGIN</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

Home.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import styles from "./styles";

export default class Home extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { navigate } = this.props.navigation;
        return(
            <View style={styles.container}>         
                <Text>Home Screen</Text>
            </View>
        )
    }
}

我在这里缺少什么？

Answer 1

这是最新的React Navigation和React Native的问题。沉默它添加：

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

我预计它将在未来几周内在React Navigation中修复。

Answer 2

实际上是React-Native问题

您可以在此处等待并检查修复程序何时可用： https://github.com/facebook/react-native/issues/18868

或者在此期间，您可以像建议的那样隐藏警告。

Answer 3

在index.js中使用此语句：

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

Answer 4

以下解决方案适合我：

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

Answer 5

反应导航问题现已关闭，您可以查看here

他们说反应原生的

内部存在问题

Answer 6

这不是来自react-navigation因为我查看了node_modules而react-navigation没有使用isMounted，它来自React-Native中的某个地方，我也做过@Romsun

使用的hack

    import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

Answer 7

对于优秀的开发人员来说，忽略此消息是错误的方法如果我们解决了这个问题，那么内存泄漏就会减少。

Answer 8

如果您正在使用EXPO进行RN开发，那么此问题现已在世博会27.0.2中修复。

请参阅https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/12

Answer 9

上面的答案对我没有用，但在index.js添加以下内容可以解决问题：

console.ignoreYellowBox = ['Warning: isMounted(...) is deprecated'];

或升级到世博会27.0.2，基本上将上述内容添加到Expo.js。请在此处查看更多信息：https://forums.expo.io/t/warnings-after-upgrade-to-expo-27/9579/10

正如其他一些答案所述，这是一个react-native问题，所以希望很快就能解决，然后在下一版本的世博会上修复。

Answer 10

这就是我暂时对这个问题的所作所为：

第1步：点击警告

步骤2：在黄色窗口中，单击右上角的堆栈跟踪选项

步骤3：找到发生警告的路径，例如：C：\ Users \ username \ projectname \ node_modules \ react \ cjs \ react.development.js

第4步：在编辑器中打开路径

步骤5：在弃用的api下找到关键字isMounted，并删除相关的已弃用函数和警告。

第6步：保存并重新加载您的应用!!就是这样

Answer 11

如果您使用的是expo客户端，请将您的版本更新为expo@27.0.2，以修复此警告。。

警告：在简单的Javascript类中不推荐使用isMounted（...）

11 个答案: