设置一个长时间的定时器,即几分钟

IT技术 javascript firebase react-native
2021-03-19 18:34:46

我想将 firebase auth 与 react native for 结合使用LoginSignup但出现黄色错误:

将计时器设置为长时间(即几分钟)是 Android 上的性能和正确性问题,因为它使计时器module保持唤醒状态,并且计时器只能在应用程序处于前台时调用。有关更多信息,请参阅(https://github.com/facebook/react-native/issues/12981)。(看到持续时间为 111862ms 的 setTimeout)

我该如何解决?
我不想忽略这一点,我想了解这个错误并以最佳和标准的方式解决它。
这是我的代码:

  export default class Login extends Component {
        constructor(props) {
            super(props)
            this.state = {
                email: '',
                password: '',
                response: ''
            }
            this.signUp = this.signUp.bind(this)
            this.login = this.login.bind(this)
        }
        async signUp() {
            try {
                await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
                this.setState({
                    response: 'Account Created!'
                })
                setTimeout(() => {
                    this.props.navigator.push({
                        id: 'App'
                    })
                }, 1500)
            } catch (error) {
                this.setState({
                    response: error.toString()
                })
            }
        }
        async login() {
            try {
                await firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
                this.setState({
                    response: 'user login in'
                })
                setTimeout(() => {
                    this.props.navigator.push({
                        id: 'App'
                    })
                })

            } catch (error) {
                this.setState({
                    response: error.toString()
                })
            }

        }
        render() {
            return (
                <View style={styles.container}>
                    <View style={styles.containerInputes}>
                        <TextInput
                            placeholderTextColor="gray"
                            placeholder="Email"
                            style={styles.inputText}
                          //  onChangeText={(email) => this.setState({ email })}
                            onChangeText={(email) => {console.log(email);}}
                        />
                        <TextInput
                            placeholderTextColor="gray"
                            placeholder="Password"
                            style={styles.inputText}
                            password={true}
                            onChangeText={(password) => this.setState({ password })}
                        />
                    </View>
                    <TouchableHighlight
                        onPress={this.login}
                        style={[styles.loginButton, styles.button]}
                    >
                        <Text
                            style={styles.textButton}
                        >Login</Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        onPress={this.signUp}
                        style={[styles.loginButton, styles.button]}
                    >
                        <Text
                            style={styles.textButton}
                        >Signup</Text>
                    </TouchableHighlight>
                </View>
            )
        }
    }

我向Google Firebase 团队报告:(https://github.com/firebase/firebase-js-sdk/issues/97

6个回答

要解决此问题...

  1. 导航到您的 node_modules/react-native/Libraries/Core/Timers/JSTimers.js 文件。

  2. 查找变量 MAX_TIMER_DURATION_MS

  3. 将其值更改为 10000 * 1000

  4. 保存更改(关闭自动格式)并重新构建您的应用程序。

https://github.com/firebase/firebase-js-sdk/issues/97#issuecomment-485410026上找到了这个答案

老的

这修复了黄色框和控制台日志。它甚至为世博会修复了它。

只需将以下脚本放在代码库的开头。

import { YellowBox } from 'react-native';
import _ from 'lodash';

YellowBox.ignoreWarnings(['Setting a timer']);
const _console = _.clone(console);
console.warn = message => {
if (message.indexOf('Setting a timer') <= -1) {
   _console.warn(message);
   }
};

新的

YellowBox 已弃用并由 LogBox

import { LogBox } from 'react-native';
import _ from 'lodash';

LogBox.ignoreLogs(['Warning:...']); // ignore specific logs
LogBox.ignoreAllLogs(); // ignore all logs
const _console = _.clone(console);
console.warn = message => {
if (message.indexOf('Setting a timer') <= -1) {
   _console.warn(message);
   }
};
对于控制台,这应该有效: console.ignoredYellowBox = ['Setting a timer'];
2021-04-24 18:34:46
没有lodash的任何替代品?
2021-05-07 18:34:46
它肯定需要克隆。有很多方法可以克隆对象。如果你使用 ES6,下面的逻辑是等价的const _console = { ...console };
2021-05-15 18:34:46
YellowBoxLogBox现在取代
2021-05-17 18:34:46

只需添加这两行

import { LogBox } from 'react-native';

LogBox.ignoreLogs(['Setting a timer']);
这应该是推荐的答案,因为其他解决方案已被弃用。
2021-04-25 18:34:46
忽略日志实际上并不能解决真正的问题。
2021-04-29 18:34:46

Google 的软件工程师 Josh Crowther 说:

使用多步短持续时间 setTimeouts 实际上并不能解决问题。Timer module仍然保持活动状态,应用程序仍然受到警告中指出的性能问题的影响。这里的问题是,我们有需要长时间计时器的用例,而 react-native 没有针对该用例进行优化。

因此,总而言之:此错误无法在此处修复,我们只能解决错误,有可用的解决方法(请参阅设置计时器很长一段时间,即多分钟)禁用警告。在我们的代码中禁用警告的工作无助于解决问题(除了禁用警告),并添加了完全不必要的额外 SDK 代码/权重。

如果您对所提供的解决方法感到不舒服,我建议您参与上述问题(即facebook/react-native#12981

如果您使用的是 react-native,0.63则在您的App.js文件中执行以下操作:LogBox从 react-native导入

import { LogBox } from 'react-native';

并且在App.js文件中的所有导入之后只添加这一行,没有必要在任何 useEffect 调用中添加这一行。

LogBox.ignoreLogs(['Setting a timer for a long period of time'])

查看文档以了解更多信息。

或者


如果您使用的是 react-native,0.62则在您的App.js文件中执行以下操作:YellowBox从 react-native导入

import { YellowBox } from 'react-native';

并且在App.js文件中的所有导入之后只添加这一行,没有必要在任何 useEffect 调用中添加这一行。

YellowBox.ignoreWarnings(['Setting a timer for a long period of time']);

查看文档以了解更多信息。