Reagieren-Navigation: Navigieren Sie Zurück Zur Wurzel mit NavigationActions.reset, goBack und getStateForAction

Sagen, ich habe navigiert durch die 4 screens in meinem StackNavigator App und jetzt möchte ich zu gehen zurück zu dem ersten Bildschirm. Es scheint drei verschiedene Möglichkeiten, dies zu tun, und Sie tun, navigieren Sie zu, wo ich will zu tun, aber jeder Weg hat eine animation, die Zyklen durch jeden vorherigen Bildschirm.

Gibt es eine saubere Art und Weise zu navigieren aus SCREEN_D zu SCREEN_A?

In anderen Worten, ich will das nicht sehen SCREEN_C und SCREEN_B Bruchteilen von Sekunden zu sehen, bevor SCREEN_A beim navigieren rückwärts aus SCREEN_D

navigation.navigate(SCREEN_A);
...
navigation.navigate(SCREEN_B);
...
navigation.navigate(SCREEN_C);
...
navigation.navigate(SCREEN_D);

Drei Möglichkeiten, dies zu tun:

1.

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

2.

 const {SCREEN_B_KEY} = this.props.navigation.state.params
 this.props.navigation.goBack(SCREEN_B_KEY)

3.

const defaultGetStateForAction = Navigation.router.getStateForAction;

Navigation.router.getStateForAction = (action, state) =>{
  if(action.type === "Navigation/BACK"){
    const routes = [
      {routeName: 'First'},
    ];
    return {
      ...state,
      routes,
      index: 0,
    };
  }
  return defaultGetStateForAction (action,state);
}
InformationsquelleAutor Turnipdabeets | 2017-05-12
  1. 7

    Hier ist eine schnelle Lösung.
    Dies wird entfernen Sie ALLE übergänge, die beim navigieren (vorwärts oder rückwärts). 

    const Nav = StackNavigator({
  Screens
},{
  transitionConfig,
  navigationOptions
});

    in transitionConfig fügen Sie diese:

    const transitionConfig = () => ({
    transitionSpec: {
      duration: 0,
      timing: Animated.timing,
      easing: Easing.step0,
    },
  })

    Den transitionConfig ist eine Funktion, die ein Objekt zurückgibt, das überschreibt Standard-Bildschirm übergänge. https://reactnavigation.org/docs/navigators/stack

    • wenn jemand eine Möglichkeit kennt das zu ändern Animationen auf eine einzige navigation, die ich lieben würde, zu hören, wie!
    InformationsquelleAutor Turnipdabeets
  2. 6

    reagieren-native navigation hat popToTop wir können es verwenden, wie Schlag 

    this.props.navigation.popToTop()
    InformationsquelleAutor Sultan Ali
  3. 5

    Können Sie dies mit Hilfe der popToTop Methode aus der Navigation prop. Auch, wenn Sie mit redux, sollten Sie aktualisieren Sie Ihre Redux-integration.

    Hoffe, das hilft!

    InformationsquelleAutor Denny Schuldt
  4. 0

    Verbrachte auch einige Zeit auf dieser, lassen Sie mich zusammenfassen, was ich entdeckt habe, gibt es mehrere Lösungen/workarounds für diese:

    1) Verwenden Sie CardStackStyleInterpolator

    Den pull-request erwähnt Cristiano Santos scheint zusammengeführt werden. So können Sie laden Sie die CardStackStyleInterpolator mit diesem import:

    import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'

    Anwenden es so:

    const YourStackNavigator = StackNavigator({
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
}, {
    transitionConfig: () => ({
        screenInterpolator: (props) => CardStackStyleInterpolator.forHorizontal(props)
    })
});

    In meinem Fall, ich habe gerade springen, um zum nächsten Bildschirm wie:

    this.props.navigation.navigate('Modal_AddGoodClass');

    Aber in meinen Druckminderer habe ich einen reset der navigator, wenn der Modal_AddGoodClass Bildschirm ausgelöst wird:

    const NewExportReceiptNavigationReducer = (state, action) => {
    //Default stuff

    let newStateBuffer = newState || state;

    if (action) {
        if (action.type === 'Navigation/NAVIGATE') {
            if (action.routeName === 'Modal_AddGoodClass') {
                newStateBuffer = {
                    index:  0,
                    routes: [
                        newStateBuffer.routes[newStateBuffer.routes.length - 1]
                    ]
                };
            }
        }
    }

    return newStateBuffer;
};

module.exports = NewExportReceiptNavigationReducer;

    Funktioniert das ziemlich gut, außer der Tatsache, dass immer noch ein "zurück" - animation wird verwendet, anstelle von "vorwärts" ein.

    Finden Sie auch hier einige Beispiel-code, der verwendet CardStackStyleInterpolator.

    2) Überschreiben getStateForAction:

    Als Fendrian erwähnt hier können Sie überschreiben getStateForAction des Routers zu vermeiden, den navigator zurück. Dies scheint zu funktionieren, außer für die "swipe-back" - Geste an iOS:

    Nav = StackNavigator(navScreens, navOptions);
const defaultGetStateForAction = Nav.router.getStateForAction;
Nav.router.getStateForAction = (action, state) => {
  if (
    state &&
    action.type === NavigationActions.BACK &&
    (
      state.routes[state.index].routeName === 'Login' ||
      state.routes[state.index].routeName === 'Main'
    )
  ) {
    //Returning null indicates stack end, and triggers exit
    return null;
  }
  return defaultGetStateForAction(action, state);
};

    Reagieren-Navigation: Navigieren Sie Zurück Zur Wurzel mit NavigationActions.reset, goBack und getStateForAction

    InformationsquelleAutor Thomas Kekeisen
  5. 0

    Dies ist meine funktionierende Lösung für das zurücksetzen zurück zur Startseite (root) ohne die Schaffung neuer route

    if(this.categoriesNav.state.nav.index >0){
    let k = this.categoriesNav.state.nav.routes[1].key;
    this.categoriesNav.dispatch(NavigationActions.back({key: k})); }

    categoriesNav verwiesen wird, um meinen stack navigator

    InformationsquelleAutor Masoud Teymouri
Schreibe einen Kommentar