Discussion :

[Slayes]

Bonjour à tous,

Je débute dans l'utilisation de réact-native et je bute depuis quelques ... longues heures, sur la personalisation de ma navigation :
J'ai un menu du type :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
       <Stack.Screen name="Login" component={Login} options={{headerShown: false}} />
        <Stack.Screen name="Home" component={Home} options={{headerShown: false}}  />  /* <= Tab.navigator =>
        <Stack.Screen name="ClientFiche" component={ClientFiche} options={{headerShown: true}}/><= Tab.navigator =>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
export default function App() {
 ....
  function Home({ navigation, route }) {
    return (
      <Tab.Navigator >
        <Tab.Screen name="Dashboard" component={Dashboard}/>
        <Tab.Screen name="ClientSearch" component={ClientSearch}/>
        <Tab.Screen name="Contact" component={Contact}/>
      </Tab.Navigator>
    );
 
function ClientFiche({ navigation, route }) {
   return (
      <Tab.Navigator>
        <Tab.Screen name="Alerte" component={Alerte}/>
        <Tab.Screen name="Surveillance" component={Surveillance}/>
        <Tab.Screen name="Capteur" component={Capteur}/>
      </Tab.Navigator>
   );

Je cherche à mettre en place le comportement suivant ... bloquer la navigation dans les tabs par le bouton retour du mobile.
C'est à dire si l'utilisateur est dans le :
- Tab Home ( screen : ClientSearch ou contact ) et qu'il utilise le bouton du mobile «back», je veux le rediriger sur la screen «Dashboard»
- Tab ClientFiche sur n'importe quelle screen et qu'il utilise le bouton du mobile «back», je veux le rediriger sur la screen «ClientSearch»

J'ai tenté l'utilisation du paramètre behavior et de côté cette fonctionnalité .... sans succès

Quelqu'un aurait-il une piste ?
Merci par avance.

[Slayes]

J'ai modifié mon code pour :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
export default function App() {
  let backUsed = false;
 
  BackHandler.addEventListener('hardwareBackPress', function () {
    backUsed = true;
  });
...
        <Tab.Screen name="Alerte" component={Alerte}
          listeners={{blur: (e) => {if (backUsed) { e.preventDefault(); navigation.navigate('ClientSearch'); backUsed = false;}}}}
        />

Le comportement est celui attendu en live, mais en release je retrouve le comportement natif de la navigation.

Quelqu'un aurait une idée du pourquoi ?