it-swarm.com.de

Zurücksetzen des Navigationsstapels für den Startbildschirm (React Navigation und React Native)

Ich habe ein Problem mit der Navigation von React Navigation und React Native. Es geht darum, die Navigation zurückzusetzen und zum Startbildschirm zurückzukehren.

Ich habe einen StackNavigator in einem DrawerNavigator erstellt, und die Navigation zwischen dem Startbildschirm und anderen Bildschirmen funktioniert. Das Problem ist jedoch, dass der Navigationsstapel wächst und wächst. Ich bin nicht sicher, wie man einen Bildschirm vom Stapel entfernt. 

Wenn Sie beispielsweise vom Startbildschirm zum Einstellungsbildschirm, dann zum Eingabebildschirm und zuletzt zum Startbildschirm wechseln, befindet sich der Startbildschirm doppelt im Stapel. Mit der Zurück-Taste komme ich nicht aus der App heraus, sondern wieder zum Eingabebildschirm.

Wenn Sie den Home-Button erneut auswählen, wäre ein Reset des Stapels großartig, aber ich weiß nicht, wie ich das tun soll. Hier jemand hat versucht, einer anderen Person mit einem ähnlichen Problem zu helfen, aber die Lösung hat für mich nicht funktioniert. 

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

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

Dies ist ein einfaches Beispiel für den Schubladenbildschirm

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>
  }
}

Ich hoffe ihr könnt mir helfen. Dies ist ein wesentlicher Bestandteil der Navigation und eine Lösung wäre großartig!

25
Daniel

So mache ich es: 

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

ersetzen Sie zumindest "Menu" durch "Home" . Sie können this.props.navigation auch an Ihre Implementierung anpassen.

40
Robin Dehu

So mache ich es:

import { NavigationActions } from 'react-navigation'

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

Der wichtige Teil ist key: null.

Dadurch wird der Stapel gelöscht, während von einem untergeordneten Navigator zu einem übergeordneten Navigator navigiert wird.

Tun Sie das, wenn Sie diesen Fehler erhalten:

 enter image description here

Für Animationen verwende ich

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

Ich kontrolliere einfach alle Animationen selbst. Legen Sie sie in die beliebige-Komponente, die Sie möchten, indem Sie sie mit <Animatable.View> umschließen.

18
agm1984

Für die neuesten Versionen von reag-navigation sollten Sie StackActions zum Zurücksetzen des Stacks verwenden. Hier ein 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

Um Back zu verwenden, müssen Sie den eindeutigen Schlüssel finden, der dem Pfad zugeordnet ist. In Ihrem Navigations-Reduzierer können Sie den vorhandenen Status durchsuchen, um die erste Route auf dem Stapel mithilfe dieses Pfads zu suchen, den Schlüssel zu packen und an Back zu übergeben. Zurück navigiert dann zu dem Bildschirm vor dem von Ihnen angegebenen Pfad.

  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

Die Antwort lautet createSwitchNavigator, diese stapeln Ihre Navigation nicht auf .. _. Fügen Sie Ihren Auth-Bildschirm/Navigator in einem createSwitchNavigator mit dem Startbildschirm/Stack hinzu.

Wenn Sie also von zu Hause aus navigieren, um sich anzumelden, werden die Stapel nicht aufbewahrt.

Weitere Informationen unter it https://reactnavigation.org/docs/de/auth-flow.htmlLoginStack

1
Nelson Bass

In Ihrem StackNavigator und DrawerNavigator haben Sie Home als Schlüssel verwendet, und ich denke, es muss eindeutig sein, weshalb es das Problem verursacht. Können Sie bitte versuchen, Home durch Stack in Ihrem DrawerNavigator zu ersetzen.

Hoffe das wird helfen :)

0

Die Pop-Aktion führt Sie zu einem vorherigen Bildschirm im Stapel zurück. Mit dem Parameter n können Sie angeben, wie viele Bildschirme zurückspringen sollen.

n - number - Die Anzahl der Bildschirme, um zurückzublättern.

importiere {StackActions} aus 'reag-navigation';

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

this.props.navigation.dispatch (popAction);