手機 app 的行為
在手機 app 運行時會有兩種狀態,分為前台模式和後台模式,從使用者的角度來說這兩個的差別就是看不看的到。前台模式就是你螢幕顯示 app 的狀態,後台模式就是你沒看到這 app 在執行,可能是你在用其他的 app 或是關掉手機螢幕,如果你沒有強制關閉 app 進到手機的多工模式把 app 往上滑的話,這個 app 其實還是在運作的,所以稱為後台模式,也能把這行為想成是 app 的待機模式。
怎麼用
在 RN 提供了三個 app state:
- active: 前台模式,目前正在使用這個 app
- background: 後台模式,離開 app 到 home 頁面或是改用其他 app 等等
- inactive: 只有 iOS 才有的多工模式,前台模式和後台模式的過渡頁面,如圖
圖片取自 [教學] iPhone X 刪除多工處理後台 APP 技巧
我們會掛上監聽事件 addEventListener
,搭配事件類型 change
取得目前最新的狀況。可以透過 AppState
的 currentState
取得最新的狀態:
class component
import React, {Component} from 'react';
import {AppState} from 'react-native';
class Test extends Component {
state = {
appState: AppState.currentState
};
updateState(newState) {
this.setState({
appState: newState;
},()=> console.log('Current state: ',this.state.appState););
}
componentDidMount(){
AppState.addEventListener('change',this.updateState);
}
componentWillUnmount() {
AppState.removeEventListener('change',this.updateState);
}
}
記得要清除監聽事件,不然會有記憶體殘留的問題。
function component
import React, {useState, useEffect} from 'react';
import {AppState} from 'react-native';
function Test() {
const [appState, setAppState] = useState(AppState.currentState);
const updateState = (newState) => {
setAppState(newState);
console.log('Current state: ', newState);
};
useEffect(() => {
AppState.addEventListener('change',updateState);
return () => {
AppState.removeEventListener('change',updateState);
}
},[]);
}