wake-up-neo.com

Reagieren Sie die Navigation: Navigieren Sie mithilfe von NavigationActions.reset, goBack und getStateForAction zurück zum Stamm

Angenommen, ich habe in meiner StackNavigator-App durch 4 Bildschirme navigiert und möchte jetzt zum ersten Bildschirm zurückkehren. Es gibt scheinbar drei verschiedene Möglichkeiten, dies zu tun, und sie navigieren dorthin, wo ich hin möchte, jedoch hat jeder Weg eine Animation, die durch jeden vorherigen Bildschirm läuft. 

Gibt es eine saubere Möglichkeit, von SCREEN_D zu SCREEN_A zu navigieren? 

Mit anderen Worten, ich möchte SCREEN_C und SCREEN_B nicht im Bruchteil einer Sekunde sehen, bevor SCREEN_A beim Rückwärtsfahren von SCREEN_D angezeigt wird.

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);
}
javascriptreactjsreact-nativereact-navigation
23
Turnipdabeets

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

this.props.navigation.popToTop()
8
Sultan Ali

Hier ist eine schnelle Lösung ... Hiermit werden ALLE Übergänge beim Navigieren (vorwärts oder rückwärts) entfernt. 

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

in transitionConfig fügen Sie Folgendes hinzu:

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

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

  • wenn jemand eine Möglichkeit kennt, Animationen bei einer einzelnen Navigation zu ändern, würde ich gerne hören, wie!
7
Turnipdabeets

Sie können dies tun, indem Sie die popToTop-Methode aus der Navigation prop verwenden. Wenn Sie redux verwenden, sollten Sie auch Ihre Redux-Integration aktualisieren.

Hoffe das hilft! 

4
Denny Schuldt

Ich habe auch einige Zeit damit verbracht, lassen Sie mich zusammenfassen, was ich herausgefunden habe. Dafür gibt es mehrere Lösungen/Workarounds:

1) Verwenden Sie CardStackStyleInterpolator

Die von Cristiano Santos erwähnte pull-Anforderung scheint zusammengeführt zu werden. So können Sie die CardStackStyleInterpolator mit diesem Import laden:

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

Um es so anzuwenden:

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

In meinem Fall springe ich einfach zum nächsten Bildschirm wie:

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

Aber in meinem Reducer setze ich den Navigator zurück, 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;

Dies funktioniert ziemlich gut, mit der Ausnahme, dass immer noch eine "zurück" -Animation anstelle einer "vorwärts" -Animation verwendet wird.

Sie können here auch als Beispielcode finden, der CardStackStyleInterpolator verwendet.

2) Überschreibe getStateForAction:

Wie Fendrian erwähnt hier können Sie getStateForAction Ihres Routers überschreiben, um zu vermeiden, dass der Navigator zurückkehrt. Dies scheint zu funktionieren, mit Ausnahme der Geste "Zurückblättern" unter 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);
};

nov-05-2017 11-34-07

0
Thomas Kekeisen

Dies ist meine Arbeitslösung für das Zurücksetzen zu Hause (root), ohne dass eine neue Route erstellt wird

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

categoriesNav verweist auf meinen Stack-Navigator

0
Masoud Teymouri