陣營原住民 - 渲染時應用進入前臺

Question

我有是基於一些異步數據的簡單顯示。

我的代碼是這樣的：

componentDidMount() { 
    asynFunctionCall(result => { 
    this.setState({stateVariable: result}); 
    }); 
} 

而且我用的是狀態變量stateVariable，以決定是否要顯示<Text>組件：

render() { 
    return (
    <View> 
     {this.state.stateVariable && 
     <Text> Special Message </Text> 
     } 
    </View> 
); 
} 

我要的是asyncFunctionCall是每當應用程序進入前臺時運行，以便用戶可以離開應用程序，執行一些操作（這可能會影響異步調用的結果），然後返回到應用程序並使顯示適當更新。

這似乎是一個標準的應用程序的行爲，我不知道如果REACT原生的生命週期API有一個標準的方式來支持它，但我沒有找到它。

我怎樣才能做到這一點的行爲，具有生命週期的功能或以其他方式？

Answer 1

是的。您可以使用AppState https://facebook.github.io/react-native/docs/appstate.html API。

我會建議在應用的開始添加這個地方，並相應地協調的意見。

Answer 2

屆時AppState應該基本能工作於iOS，但Android的後臺活動隨時觸發自己的代碼外的本機模塊被觸發，e.g拍攝照片。檢測家庭或最近的應用按鈕點擊方式會更好。這是因爲來自社交媒體或照片等其他應用程序的應用程序中的片段也會觸發後臺狀態，這是您不需要的，因爲它們仍然在應用程序中，從相機中將照片添加到配置文件等。您可以輕鬆檢測到家中和最近的應用程序按鈕點擊Android的反應本地家庭按下。這個庫只是公開android按鈕事件。

首先安裝庫npm i react-native-home-pressed --save，然後鏈接它react-native link。然後重新構建您的應用程序並添加以下代碼片段。

import { DeviceEventEmitter } from 'react-native' 
 

 
class ExampleComponent extends Component { 
 
    componentDidMount() { 
 
    this.onHomeButtonPressSub = DeviceEventEmitter.addListener(
 
    'ON_HOME_BUTTON_PRESSED', 
 
    () => { 
 
     console.log('You tapped the home button!') 
 
    }) 
 
    this.onRecentButtonPressSub = DeviceEventEmitter.addListener(
 
    'ON_RECENT_APP_BUTTON_PRESSED', 
 
    () => { 
 
     console.log('You tapped the recent app button!') 
 
    }) 
 
    } 
 
    componentWillUnmount(): void { 
 
    if (this.onRecentButtonPressSub) this.onRecentButtonPressSub.remove() 
 
    if (this.onHomeButtonPressSub) this.onHomeButtonPressSub.remove() 
 
    } 
 
}