Hogyan akadályozzuk meg, hogy egy képernyőről vissza lehessen lépni a megelőző képernyőkre? A válasz: navigation.replace
Itt akár le is zárhatnánk, de azért járjuk körbe kicsit a témát :).
Mikor lehet rá szükség?
Két olyan használati példát is hoztam, ami viszonylag gyakran előfordulhat.
- Az egyik az, amikor csinálunk egy felhasználó beléptetést. Miután a felhasználó sikeresen bejelentkezett az applikációba, akkor nem volna szerencsés engedélyezni neki azt, hogy „visszalapozhasson” (például a Stack navigáció esetén) a beléptető képernyőre.
Természetesen megoldható lehetne a probléma úgy is, hogy belépés után megjegyezzük egy „globális” változóban azt a tényt, hogy a felhasználó belépett. Majd, amikor szándékosan vagy véletlenül (véletlenek pedig nincsenek :)) visszanavigál az előző képernyőre, akkor a beléptető képernyőbe beépített logika megnézi, hogy „Van belépve már user? Ha igen, akkor menj innen de tüstént!”. Magyarul a belépő képernyő intelligensen ellenőrzi a user belépettségének tényét, és ha van belépve valaki, akkor nem enged újabb beléptetést, hanem valahová máshová elirányít.
Megoldásnak megoldás, de nem szép és nem is akadályozza meg alapvetően azt, hogy a felhasználó visszalépési kísérletet tegyen. - Egy másik alkalmazási terület lehet például az, amikor egy felhasználó legeslegelőször jár az applikációban. Tehát egy frissen regisztrált delikvensről van szó. Ilyenkor általában egy olyan képernyőre irányítjuk, amin néhány alapvető profil adatot be tud állítani ahhoz, hogy érdemben el tudja kezdeni a mobilappot használni. Például megadja a nevét, néhány elérhetőségi adatot, profilképet tölthet fel, stb. Tehát nem kérünk be egyből tőle kismilló, szükségtelen adatot, mert fogja magát, elmegy és még az appot is törli a mobilról.
És akkor ez egyben egy hasznos tanács is, hogy a vadonatúj felhasználókat ne terheljük azzal, hogy profiladatok tömkelegét kelljen már az első használatba vételkor megadnia.
Amikor a fenti, alapvető adatokat megadja és a mentés gombra bök, akkor a sikeres mentés után valamilyen másik képernyőre irányítja át az alkalmazás.
És itt ismét fennáll a veszélye annak, hogy visszalép. Nem minden esetben akarjuk ezt megengedni.
Megoldás: navigation.replace
A React Navigation egy népszerű csomag, amit a mobilapplikációban navigáláshoz használunk. Magának a navigációnak a bemutatásával egy korábbi bejegyzésben foglalkoztam.
Most azt mutatom meg, hogy a fenti problémára mi a megoldás.
Feltételezhetőleg az említett bejegyzés alapján már tudjuk, hogy a useNavigation hook-ból ki lehet szedni a navigation prop-ot(objektumot), aminek számos metódusa és tulajdonsága van.
A „sima” navigációhoz például a navigate metódust mozgósíthatjuk:
navigation.navigate("KepernyoNeveAmireNavigalniAkarunk");Amikor ezt használjuk egy másik képernyőre való átlépésre, akkor a háttérben az történik, hogy a navigációs verem legtetejére bekerül az új képernyő. Ez azt jelenti, hogy elérjük a veremben alatta levő előző képernyőt is. Vissza tudunk rá navigálni mondjuk a kijelzőn egy balról – jobbra húzással.
Na pont ez az, amit jelen esetben el szeretnénk kerülni.
Most, hogy már jól körülírtam a dolgot, a megoldás tehát a replace metódus használata:
navigation.replace("KepernyoNeveAmireNavigalniAkarunk");Ez hozza számunkra azt az üdvözítő megoldást tehát, hogy el is jutunk a megadott képernyőre. Ugyanakkor törlődik is a verem tartalma. Bármit csinál a kis felhasználónk, nem fog visszajutni az előző képernyőre.
Hehe 🙂