La réinitialisation de la pile de navigation de l'écran d'accueil (réaction de Navigation et de Réagir en Natif)

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.

Lors de la sélection du 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 tiroir é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!

InformationsquelleAutor Daniel | 2017-03-29

45

C'est Comment je le fais :
```
reset(){
    return this.props
               .navigation
               .dispatch(NavigationActions.reset(
                 {
                    index: 0,
                    actions: [
                      NavigationActions.navigate({ routeName: 'Menu'})
                    ]
                  }));
  }
```
au moins remplacer "Menu" avec la "Maison".
Vous pouvez également adapter cette.accessoires de jeu.la navigation à votre mise en œuvre.

Dans la version > 2 suivez ce:
```
import { NavigationActions, StackActions } from 'react-navigation';
        const resetAction = StackActions.reset({
                index: 0,
                actions: [NavigationActions.navigate({ routeName: 'MainActivity' })],
            });

this.props.navigation.dispatch(resetAction); 
```
- Produit un méchant de l'animation que la plupart d'AQ de se faire rejeter pour info.
- Comment envoyer de Navigation Params dans ce cas?
- Afin d'éviter le méchant de l'animation, j'ai dû désactiver complètement d'animation pour tous les transitions selon cette réponse.
- J'ai le même problème, ce n'est pas de travail..
- De l'excellent travail, mais avez-vous eu une fuite de mémoire? Je sais le faire sur Xamarin ne relâchez pas la pile, et la navigation entre les enfants de parents produire de fuite. Est de même ici?
- D'où appelez-vous cela? Je ne trouve pas d'endroit pour mettre ce depuis DrawerNavigator gérer pour changer d'écran quand on appuie sur l'écran de titres dans le tiroir. Devrions-nous utiliser 'contentComponent" sur DrawerNavigator?
- AH.. je l'obtenir. Le gars qui a demandé utilise contentComponent'.
- Je suis assez surpris de voir que c'est la réponse donnée à la question de l'animation. Il connaît trop, mais va regarder les liens que vous les gars suggèrent.
- Je n'ai pas l'obtenir. J'ai vu ce genre de question sans une bonne réponse à de nombreuses reprises. Je ne peux même pas essayer cette "solution" car je n'utilise pas contentComponent. Je viens d'essayer d'ouvrir un point de vue, mais le cadre est totalement dans le chemin et se bloque mon application. Il est plus facile de le faire avec du code assembleur, au moins, c'est possible.
- Je suis à l'aide de réagir de navigation v2 api , réinitialisation de l'api est déplacé à StackActions (v2.reactnavigation.org/docs/en/stack-actions.html) , mais sa ne marche pas pour moi , je suis en train de la même manière que dans le lien
InformationsquelleAutor Robin Dehu
20

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' })]
}))
```
L'important, c'est key: null.

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

Faire que si vous obtenez ce message d'erreur:

Pour les animations, j'utilise
```
//https://github.com/oblador/react-native-animatable
import * as Animatable from 'react-native-animatable'
```
Je viens de contrôle de toutes les animations de moi-même. Les mettre sur tout composant que vous souhaitez en l'enveloppant avec <Animatable.View>.
- Merci! Le key: null est ce qui me manquait 🙂
- Où est-ce code censé aller?
- Ce code ci-dessus est l'envoi de l'action qui réinitialise la pile, donc, il va où vous voulez déclencheur. Par exemple, vous pouvez importer des NavigationActions dans votre action créateurs de fichiers et de réinitialiser la pile lorsque certaines actions viennent à travers.
InformationsquelleAutor agm1984
13

Pour les versions les plus récentes de réagir de la 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...' },
       }),
     ],
   }))
}
```
- Vrai, Dans la version la plus récente de ce l'on a travaillé 🙂
- que faire si il veut aller dans Settings écran?
- Je ne suis pas sûr si je me calme bien compris votre question, mais si je le faisais, il suffit de placer routeName: "Accueil" pour routeName: "Paramètres" sur l'extrait de code que j'ai posté. J'espère que ça aide
- Je l'ai fait pour le travail en ajoutant un autre élément d'action. Savez-vous comment mettre de tiroir de l'élément de focalisation? Parce que, après la navigation de cette manière, l'accent est toujours sur le défaut de tiroir de l'élément de
InformationsquelleAutor Gustavo Garcia

À utiliser le Verso, vous devez trouver la clé unique associé avec le chemin d'accès. À l'intérieur de votre navigation réducteur, vous pouvez rechercher l'état actuel de trouver la première route sur la pile à l'aide de ce chemin, prenez la clé de sa & pass qu'à l'Arrière. De retour sera alors accédez à l'écran avant le chemin d'accès 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 );

InformationsquelleAutor peterorum

1

La Réponse est createSwitchNavigator, c'ceux qui ne sont pas de la pile de votre navigation.
Ajouter votre auth écran/navigator dans un createSwitchNavigator avec l'écran d'accueil/de la pile.

Avec que, lorsque vous naviguez à partir de la maison pour se connecter, les piles ne sont pas conservés.

Pour en savoir plus sur elle
https://reactnavigation.org/docs/en/auth-flow.htmlLoginStack
- Cette page a été déplacé ici: reactnavigation.org/docs/en/auth-flow.html
- Merci pour la mise à jour
InformationsquelleAutor Nelson Bass
0

Dans votre StackNavigator et DrawerNavigator vous avez utilisé à la Maison comme une clé, et je pense qu'il a d'unique et c'est pourquoi il est de la création du problème. Pouvez vous s'il vous plaît essayez de remplacer la Maison avec de la Pile à l'intérieur de votre DrawerNavigator.

Espère que cela aidera 🙂
- Merci pour la réponse, mais malheureusement rien n'a changé. Le problème est toujours présent.
- Je pense que dans votre cas, vous devez utiliser TabNavigator au lieu de StackNavigator. pouvez-vous s'il vous plaît essayer et vérifier.
- Merci encore pour la réponse, mais j'ai besoin de la StackNavigator. Le TabNavigator a un comportement complètement différent et pas de barre de titre. J'ai besoin d'une remise à zéro de la pile de la StackNavigator, ou la possibilité d'avoir la double écrans dans le navigateur.
- Vous pouvez créer votre propre en-tête, et pour votre cas d'utilisation, je pense que TabNavigator est un ajustement parfait.
- Je ne vois pas ici toutes les possibilités pour un en-tête de la barre comme sur la StackNavigator: reactnavigation.org/docs/navigators/tab L'animation est également un autre. Merci, mais le TabNavigator ne semble pas être la solution. Ce ne serait qu'une sorte de contourner.
- avez-vous une solution pour cela?
InformationsquelleAutor Vijay Suryawanshi
0

Le menu action vous ramène à l'écran précédent dans la pile. La n de paramètre vous permet de spécifier combien d'écrans à l'arrière pop par.

n - nombre - Le nombre d'écrans à l'arrière pop par.

importer { StackActions } à partir de 'réagir de la navigation';

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

cette.accessoires de jeu.la navigation.dispatch(popAction);

InformationsquelleAutor Kosalram Rama Krishnan

Vous devez vous connecter pour publier un commentaire.