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

Question

J'ai un problème avec la navigation de Réagir de Navigation et de Réagir Natif. C'est sur la réinitialisation de la navigation et le retour à l'écran d'accueil.

J'ai un StackNavigator à l'intérieur d'un DrawerNavigator, et la navigation entre l'écran d'accueil et autres écrans de travail. Mais le problème, c'est que la pile de navigation se développe et grandit. Je ne suis pas sûr de savoir comment supprimer un écran à partir de la pile.

Par exemple lorsqu'on passe de l'écran d'accueil à l'écran paramètres, puis à l'écran de saisie et enfin de nouveau à l'écran d'accueil l'écran d'accueil est deux fois dans la pile. Avec le bouton de retour je ne sors pas de l'application, mais encore une fois à l'écran de saisie.

Lorsque vous sélectionnez le bouton d'accueil une remise à zéro de la pile serait génial, mais je ne sais pas comment faire. 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 c'est un exemple simple de le tiroir de l'écran

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 pourrez m'aider. C'est une partie essentielle de la navigation et une solution serait génial!

Answer 1

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.

Answer 2

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.

Que les lingettes de la pile lors de la navigation d'un enfant de navigateur à un parent navigator.

Si vous obtenez cette erreur:

Pour les animations, j'utilise

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

Je viens de contrôler toutes les animations de moi-même. Les mettre sur tout composant que vous souhaitez en l'enveloppant avec <Animatable.View>.

Answer 3

Pour les dernières versions de react-navigation, vous devez utiliser StackActions pour réinitialiser la pile, voici un morceau 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...' },
       }),
     ],
   }))
}
 

Answer 4

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

   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 );
 

Answer 5

La réponse est createSwitchNavigator , ce ne sont pas ceux qui empilent votre navigation. Ajoutez votre écran d'authentification / navigateur dans un createSwitchNavigator avec l'écran d'accueil / la pile.

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

Pour en savoir plus à ce sujet https://reactnavigation.org/docs/en/auth-flow.htmlLoginStack