跳到主要內容
版本:6.x

自訂 Android 返回按鈕行為

預設情況下,當使用者按下 Android 硬體返回按鈕時,react-navigation 將會彈出畫面,或者在若沒有可彈出的畫面時退出應用程式。這是合理的預設行為,但有些情況下您可能想要實作自訂處理方式。

以下是一個範例:考慮一個畫面,使用者正在清單中選取項目,且「選取模式」為作用中。當按下返回按鈕時,您最先的動作會是停用「選取模式」,然後在第二次按下返回按鈕時才彈出畫面。以下程式碼片段展示了這樣的狀況。我們利用與 react-native 一起提供的 BackHandler,以及 useFocusEffect 勾子來新增我們的自訂 hardwareBackPress 聆聽器。

從 `onBackPress` 回傳 `true` 表示我們已經處理事件,且 react-navigation 的監聽器不會被呼叫,因此螢幕不會彈出。傳回 `false` 會導致事件往上傳遞,而 react-navigation 的監聽器會彈出該螢幕。

function ScreenWithCustomBackBehavior() {
// ...

useFocusEffect(
React.useCallback(() => {
const onBackPress = () => {
if (isSelectionModeEnabled()) {
disableSelectionMode();
return true;
} else {
return false;
}
};

const subscription = BackHandler.addEventListener(
'hardwareBackPress',
onBackPress
);

return () => subscription.remove();
}, [isSelectionModeEnabled, disableSelectionMode])
);

// ...
}

提供的程式碼非常適合顯示在 `StackNavigator` 中的螢幕。目前並未支援在其他狀況下處理自訂後退按鈕(例如:已知的使用案例,當使用者希望在一個打開的抽屜中處理後退按鈕時,這是不行的。歡迎大家提交 PR 來處理此類使用案例!)

如果您想要防止從螢幕返回,而不是覆寫系統後退按鈕,請參閱 防止返回 的文件。

為何不使用元件生命週期方法

起初,您可能會傾向於使用 `componentDidMount` 訂閱後退按鈕事件,並使用 `componentWillUnmount` 來取消訂閱,或使用 `useEffect` 來新增監聽器。此方法無法運作—詳細資訊請參閱 導覽生命週期