Reagieren Navigation - Navigation action = zurück

Question

ich die Rückseite Aktion verwenden möchten, von der Navigation reagieren, um eine modale wie folgt zu entlassen:

this.props.navigation.dispatch(NavigationActions.back({ 
    key: this.props.navigation.state.params.previousKey 
})); 

ich den Schlüssel des vorherigen Bildschirm passieren, wenn zu dem modalen Navigation:

this.props.navigation.navigate('ModalScreen', { 
    previousKey: this.props.navigation.state.key 
}); 

Aber nichts ist passiert.

Wenn ich Schlüssel nicht benutze, verlasse die navigationaction.back das Modal korrekt zurück zum vorherigen Bildschirm, wenn ich die Funktion anrufe, indem ich auf eine Schaltfläche klicke.

Aber wenn ich es aus dem Konstruktor aufrufen, sendet sie an die Wurzel Bildschirm zurück ...

Jede Idee?

EDIT 1

Der Versuch, einen anderen Ansatz mit benutzerdefinierten Aktion wie folgt. Wenn ich die App neu lade und es versuche, funktioniert sie beim ersten Mal richtig. Aber wenn ich es ein zweites Mal versuche, ohne die App neu zu laden, bekomme ich den Fehler: Kann 'Routen' von undefined nicht lesen.

in meiner router.js Datei:

const CheckInStack = StackNavigator({ 
    CheckIn: { 
     screen: CheckIn, 
     navigationOptions: { 
      header: null, 
      headerLeft: null, 
      gesturesEnabled: false, 
     } 
    } 
}); 

export const SiteStack = StackNavigator({ 
    Site: { 
     screen: Site, 
     navigationOptions: { 
      header: null, 
      headerLeft: null, 
      gesturesEnabled: false, 
     } 
    }, 
    CheckIn: {screen: CheckInStack,}, 
}, {mode: 'modal', headerMode: 'none'}); 

const prevGetCheckInStateForAction = SiteStack.router.getStateForAction; 

SiteStack.router = { 
    ...SiteStack.router, 
    getStateForAction(action, state) { 
     if(state && action.type === "DISMISS_MODAL") { 

      console.log('in router'); 

      const routes = state.routes.slice(); 
      routes.pop(); 
      return { 
       ...state, 
       routes, 
       index: routes.length -1, 
      } 
     } 
     return prevGetCheckInStateForAction(action, state); 
    } 
}; 

in meiner screen.js Datei:

componentDidMount() { 

     const {profile} = this.props.auth; 

     var channel = pusher.subscribe('private-user.' + profile.id); 

     channel.bind('App\\Events\\Order\\SiteHasAnsweredCheckIn', event => { 

      // this.props.navigation.dispatch(NavigationActions.back()); => this is where the back actions is launched. nowhere else. 

      //CUSTOM ACTION DISPATCH 
      this.props.navigation.dispatch({ 
       type: 'DISMISS_MODAL' 
      }); 

     }); 
} 

Answer 1

hier eine Lösung gefunden: https://github.com/react-community/react-navigation/issues/686

von richardfickling auf GitHub.

In meinem router.js, erstelle ich eine DismissableStackNavigator wie folgt:

import React, { Component } from 'react'; 
import { StackNavigator } from 'react-navigation'; 
export default function DismissableStackNavigator(routes, options) { 
    const StackNav = StackNavigator(routes, options); 

    return class DismissableStackNav extends Component { 
    static router = StackNav.router; 

    render() { 
     const { state, goBack } = this.props.navigation; 
     const nav = { 
     ...this.props.navigation, 
     dismiss:() => goBack(state.key), 
     }; 
     return (
     <StackNav 
      navigation={nav} 
     /> 
    ); 
    } 
    } 
}; 

Und dann ist mein checkin Stapel wie folgt:

const CheckInStack = DismissableStackNavigator({ 
    CheckIn: { 
     screen: CheckIn, 
     navigationOptions: { 
      header: null, 
      headerLeft: null, 
      gesturesEnabled: false, 
     } 
    } 
}); 
export const SiteStack = StackNavigator({ 
    Site: { 
     screen: Site, 
     navigationOptions: { 
      header: null, 
      headerLeft: null, 
      gesturesEnabled: false, 
     } 
    }, 
    CheckIn: {screen: CheckInStack,}, 
}, {mode: 'modal', headerMode: 'none'}); 

Und dann in meiner CheckIn Bildschirm:

componentDidMount() { 

    const {profile} = this.props.auth; 

    var channel = pusher.subscribe('private-user.' + profile.id); 

    channel.bind('App\\Events\\Order\\SiteHasAnsweredCheckIn', event => { 

     //method coming from the Dismissable Navigator stack 
     this.props.navigation.dismiss(); 

    }); 
} 

Answer 2

Ich weiß nicht, ob es Ihr Problem lösen, aber Sie könnte versuchen, die goBack-Methode zu verwenden, anstatt die Zurück-Aktion zu senden. Wie folgt aus: this.props.navigation.goBack()