設置的很長一段時間的計時器，即多分鐘

Question

我想用火力權威性與Login和Signup反應母語，但我得到了一個黃色的錯誤：

設置定時器用於長時間時間（即多分鐘）是Android上的一個性能和正確性問題，因爲它使定時器模塊保持喚醒狀態，只有在應用程序處於前臺時才能調用定時器。有關更多信息，請參閱（https://github.com/facebook/react-native/issues/12981）。 （鋸片超時時間111862ms）

我該如何解決這個問題？
我不想忽視這一點，我想理解這個錯誤，並用最好的和標準的方式解決這個問題。
這是我的代碼：

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> 
      ) 
     } 
    } 

我報以谷歌火力地堡隊：（https://github.com/firebase/firebase-js-sdk/issues/97）

Answer 1

我得到了同樣的問題，我認爲這是火力網SDK的問題，所以我決定放棄firebase web SDK，因爲它運行在js線程中，而不是react-native線程。

而我發現react-native-firebase。它比具有更高性能的firebase web SDK更好，並且此問題消失

Answer 2

這修復了黃色框和控制檯日誌。它甚至修復了世博會。

只需在代碼庫的開頭放置以下腳本。

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); 
    } 
}; 

Answer 3

另一種方法是使用react-native-ignore-warnings模塊。

https://github.com/jamrizzi/react-native-ignore-warnings

https://www.npmjs.com/package/react-native-ignore-warnings

這甚至適用於世博的應用程序。

您可以通過以下方式使用它。 。 。

import ignoreWarnings from 'react-native-ignore-warnings'; 

ignoreWarnings('Setting a timer'); 

Answer 4

在login()，你setTimeout()呼叫丟失的時間間隔值。一般來說，如果窗口/標籤在後臺，瀏覽器現在不會觸發超時/間隔，或者至少它們不會及時。這是爲了防止濫用腳本行爲，並通過可能投票的腳本降低功耗。

您的代碼應該原則上工作，如果用戶在計時器運行時從窗口切換，它將在返回時完成。這可能是從用戶體驗角度來看的，因爲用戶看到了轉換，而不是在他們沒有看到的時候在後臺發生。它有助於他們保持心理背景。

黃色方框是因爲您根據消息（近兩分鐘）設置了一個過長的計時器，並且這不太可能是您想要的內容。 JS環境警告你，你正在做的事情不可能是你想要的。如果它是你想要的，你可以靜音警告。