web-dev-qa-db-fra.com

Réinitialisation de la pile de navigation pour l'écran d'accueil (React Navigation et React Native)

J'ai un problème avec la navigation de React Navigation et React Native. Il s'agit de réinitialiser la navigation et de revenir à l'écran d'accueil.

J'ai construit un StackNavigator à l'intérieur d'un DrawerNavigator et la navigation entre l'écran d'accueil et les autres écrans fonctionne. Mais le problème est que la pile de navigation se développe et se développe. Je ne sais pas comment retirer un écran de la pile. 

Par exemple, lorsque vous passez de l'écran d'accueil à l'écran des paramètres, puis à l'écran de saisie et enfin à l'écran d'accueil, l'écran d'accueil se trouve deux fois dans la pile. Avec le bouton de retour, je ne sors pas de l'application, mais encore à l'écran de saisie.

Lorsque vous sélectionnez à nouveau le bouton d'accueil, une réinitialisation de la pile serait une bonne chose, mais je ne sais pas comment procéder. Ici quelqu'un a essayé d'aider une autre personne avec un problème similaire, mais la solution n'a pas fonctionné pour moi. 

const Stack = StackNavigator({
  Home: {
    screen: Home
  },
  Entry: {
    screen: Entry
  },
  Settings: {
    screen: Settings
  }
})

export const Drawer = DrawerNavigator({
  Home: {
    screen: Stack
  }},
  {
    contentComponent: HamburgerMenu
  }
)

Et ceci est un exemple simple de l'écran du tiroir

export default class HamburgerMenu extends Component {
  render () {
    return <ScrollView>
      <Icon.Button
        name={'home'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Home')}}>
        <Text>{I18n.t('home')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'settings'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Settings')}}>
        <Text>{I18n.t('settings')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'entry'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Entry')}}>
        <Text>{I18n.t('entry')}</Text>
      </Icon.Button>
    </ScrollView>
  }
}

J'espère que vous pouvez m'aider. C'est une partie essentielle de la navigation et une solution serait géniale!

javascriptreact-nativenavigationreact-navigation
25
Daniel

Voici comment je le fais: 

reset(){
    return this.props
               .navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [
                      NavigationActions.navigate({ routeName: 'Menu'})
                    ]
                  }));
  }

remplacez au moins "Menu" par "Accueil" . Vous pouvez également adapter this.props.navigation à votre implémentation.

40
Robin Dehu

Voici comment je le fais:

import { NavigationActions } from 'react-navigation'

this.props.navigation.dispatch(NavigationActions.reset({
    index: 0,
    key: null,
    actions: [NavigationActions.navigate({ routeName: 'ParentStackScreen' })]
}))

La partie importante est key: null.

Cela efface la pile lors de la navigation depuis un enfant navigator vers un parent navigator.

Faites cela si vous obtenez cette erreur:

 enter image description here

Pour les animations, j'utilise

// https://github.com/oblador/react-native-animatable
import * as Animatable from 'react-native-animatable'

Je contrôle juste toutes les animations moi-même. Mettez-les sur n'importe quel composant de votre choix en l'enveloppant avec <Animatable.View>.

18
agm1984

Pour les dernières versions de react-navigation, vous devez utiliser StackActions pour réinitialiser la pile. Voici un extrait de code:

// import the following
import { NavigationActions, StackActions } from 'react-navigation'

// at some point in your code
resetStack = () => {
 this.props
   .navigation
   .dispatch(StackActions.reset({
     index: 0,
     actions: [
       NavigationActions.navigate({
         routeName: 'Home',
         params: { someParams: 'parameters goes here...' },
       }),
     ],
   }))
}
7
Gustavo Garcia

Pour utiliser Back, vous devez rechercher la clé unique associée au chemin. Dans votre réducteur de navigation, vous pouvez rechercher l’état existant pour trouver le premier itinéraire de la pile utilisant ce chemin, saisir sa clé et la transmettre à Retour. Retour ira ensuite à l'écran avant le chemin que vous avez donné.

  let key;

  if (action.payload) {
    // find first key associated with the route
    const route = action.payload;

    const routeObj = state.routes.find( (r) => r.routeName === route );

    if (routeObj) {
      key = { key: routeObj.key };
    }
  }

  return AppNavigator.router.getStateForAction( NavigationActions.back( key ), state );
3
peterorum

La réponse est createSwitchNavigator, ils ne peuvent pas empiler votre navigation . Ajoutez votre écran/navigateur d'autorisation dans un createSwitchNavigator avec l'écran/pile d'accueil.

Avec cela, lorsque vous naviguez de chez vous pour vous connecter, les piles ne sont pas conservées.

Pour plus d'informations à ce sujet https://reactnavigation.org/docs/fr/auth-flow.htmlLoginStack

1
Nelson Bass

Dans vos StackNavigator et DrawerNavigator, vous avez utilisé Home comme clé et je pense qu’il doit être unique et c’est pourquoi il crée le problème. Pouvez-vous s'il vous plaît essayer de remplacer Home with Stack dans votre DrawerNavigator.

J'espère que ça va aider :)

0
Vijay Suryawanshi

L'action pop vous ramène à un écran précédent dans la pile. Le paramètre n vous permet de spécifier le nombre d'écrans à afficher.

n-number - Nombre d'écrans par lesquels revenir en arrière.

importer {StackActions} de 'react-navigation';

const popAction = StackActions.pop ({ n: 1, });

this.props.navigation.dispatch (popAction);

0
Kosalram Rama Krishnan