我試圖使回掃進入不同的螢屏
我有以下的螢屏順序 MenuScreen, CartScreen 然后 PaymentScreen.
例如，如果用戶在PaymentScreen并向后滑動，用戶應該回到CartScreen，但是我想把用戶導航到MenuScreen而不是CartScreen
useEffect(() => {
navigation.addListener('beforeRemove', e => {
e.preventDefault();
navigation.navigate('MenuScreen');
});
}, [navigation])。
但是我面臨這個錯誤：
ERROR RangeError: 超過了最大呼叫堆疊的大小。
有什么線索可以解決這個問題嗎？或者是解決方案？
uj5u.com熱心網友回復：
有兩種方法Ahmed，你可以實作這個目標。以下是一些提示：
首先從Menu -> Cart -> Payment移動，然后當回到Payment -> Menu。要做到這一點，你只需要使用StackAction，使用navigation：import { StackActions } from '@react-navigation/native'/span>。
// 當從選單-> 購物車時
navigation.navigate('Cart') 。
// While going from Cart -> Payment (Here is the key)
navigation.dispatch(
StackActions.replace('Payment')
);
現在當你向后滑動時，你將只看到選單頁。
我們做了什么：我們從導航堆疊中替換了Cart，因此堆疊中只有選單和支付頁面可用。結果是回到了選單。不要忘記使用navigation.navigate()來進入Cart`。這將有助于你。
- CommonActions Reference [NOT SO PREFERRED]: 現在這將完全按照你的意愿重置導航，并幫助你實作你想實作的目的。在這里，你實際上不必擔心你在從
Menu -> Cart導航時使用什么，但我們必須擔心從Cart -> Payment。
缺點：當使用這個時，您將失去您在Menu頁面中的所有進展，當您使用Swipe、Android Hard Back button從Payment -> Menu回來時，您想看到這些。此外，它將重置整個導航堆疊，所以你正在用你的手段創建一個新的堆疊。因此，不那么受歡迎
import { CommonActions } from '@react-navigation/native'/span>。
// from Menu -> Cart
navigation.navigate('Cart') 。
// From Cart -> Payment (Most important) -> Resetting the whole stack
navigation.dispatch(
CommonActions.reset（{
index: 1,
routes: [
{ name: 'Menu' },
{ name: 'Payment' },
]
})
);
uj5u.com熱心網友回復：
從useEffect deps中移除導航并添加一個清理函式
發生最大呼叫堆疊大小超標的原因是你在useEffect呼叫中的deps陣列中有navigation。這意味著每次導航選項發生變化時，它都會添加一個新的監聽器，從而導致錯誤的發生。
此外，你還應該為你的效果添加一個清理函式，這樣監聽器就不會在其他頁面上引起不必要的行為。
以下是我將如何重構該效果：
。useEffect(() => {
//創建對監聽器的參考，以便它可以被清理掉。
const unsubscribe = navigation.addListener('beforeRemove', e => //span> {
e.preventDefault（）。
navigation.navigate（'MenuScreen'）。
});
//清理卸載時的監聽器。
return unsubscribe;
}, []); //從deps中移除導航uj5u.com熱心網友回復：
使用navigation.reset或navigation.popToTop（）
useEffect(() => navigation.addListener('beforeRemove', e => {
e.preventDefault();
navigation.popToTop();
});
, [navigation]）。)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/309139.html
標籤：