gehen zwei Bildschirme zurück mit einzelnem Presse-Event mit reactnavigation in native App reagiert

Question

ich reactnavigation Komponente von https://reactnavigation.org bin mit und dem Code mit unten i einen Bildschirm

<Button 
      onPress={() => goBack()} 
      title="Go back from this HomeScreen" 
     /> 

geht zurück, wie ich 2 Bildschirm gehen zurück auf einzelne Presse Aktion

ich diesen Code bin mit dem Navigator

const RouteConfigs = { 
    Login: {screen:Login}, 
    Home: {screen:Home}, 
    Chat: {screen:Chat}, 
    Facebook: {screen:Facebook}, 
    Facebookgallery: {screen:Facebookgallery}  
} 

const StackNavigatorConfig = { 
    headerMode: 'none', 
} 

export default StackNavigator(RouteConfigs, StackNavigatorConfig) 

ich von zu Hause aus zu Facebook navigieren zu initialisieren mit dieser Code:

() => this.props.navigation.navigate('Facebook', {user:this.state.user}) 

und von Facebook zu Facebookgallery mit diesem Code:

onPress={() => this.props.navigation.navigate('Facebookgallery', {user:this.state.user}) } 

jetzt will ich von Facebookgallery zum Haupt mit einigen Parametern direkt zurück gehen

Answer 1

Es klingt wie du bist auf der Suche nach etwas in der Art von # reset (https://reactnavigation.org/docs/navigators/navigation-actions#Reset).

Ich habe diese Bibliothek nicht benutzt, aber Sie versuchen wahrscheinlich, zum Hauptbildschirm des Navigationsstapels zurückzukehren. Andere Bibliotheken, die ich für Nav verwendet habe, haben eine Art von popToRoot oder etwas ähnliches.

Answer 2

Sie könnten einen zusätzlichen Navigationsaktionstyp definieren, z. POP_TWO_ROUTES und überschreiben StackRouter.getStateForAction(passedAction, state) wie die (nur als Beispiel):

... 
onPress={() => this.props.navigation.dispatch({ 
    type: 'POP_TWO_ROUTES' 
})} 
... 

Siehe auch https://reactnavigation.org/docs/routers/#Custom-Navigation-Actions:

... 
const defaultGetStateForAction = AppNavigator.router.getStateForAction; 

AppNavigator.router.getStateForAction = (passedAction, state) => { 
    if(state && state.routes && state.routes.length > 2 
     && passedAction.type === 'POP_TWO_ROUTES') { 
    let routes = state.routes.slice(); 
    routes.pop(); 
    routes.pop(); 

    return { 
     index: routes.length - 1, 
     routes: routes 
    }; 
    } 
    // default behaviour for none custom types 
    return defaultGetStateForAction(passedAction, state); 
} 
... 

dann in dem Bildschirm Komponente, die Sie so etwas tun können.

Answer 3

Die „richtige“ Lösung jetzt ist:

1. den Schlüssel für den Bildschirm nach dem Bildschirm, den Sie gehen wollen Holen. In Fall müssen Sie den Schlüssel für den Facebook-Bildschirm erhalten.
2. Anruf NavigationAction.back (Taste: ‚Schlüssel-of-vorherigen-Bildschirm‘), und es wird Ihr Navigationsstapel Pop, als ob Sie auf dem Bildschirm waren mit diesem Schlüssel

Codebeispiel, wohin ich gehe zurück mehrere Bildschirme in einem Thunk (relevant, wenn Sie redux verwenden):

export const postItemAndReturnToMap = item => (dispatch, getState) => { 
    const {nav} = getState(); 

    // Get the key for the screen after/above the root view and use that as reference 
    // to return to the root view. This is hardcoded for my stack setup, as you can see 
    // there are quite a few nested StackNavigators in my setup 
    const {key} = nav.routes[0].routes[0].routes[0].routes[1]; 

    // Dispatch whatever action you want 
    dispatch(postItem(item)); 

    // This will now go back multiple screens, in my case to the 
    // bottom of the top stackNavigator 
    return dispatch(NavigationActions.back({key})); 
}; 

Dies ist nicht schön. Lass uns hoffen, dass die Navigation etwas wie .back(2) implementiert, um die Dinge in Zukunft einfacher zu machen.

Answer 4

Versuchen Sie, diese

onPress={() => { 
    props.rootNavigation.dispatch(
     NavigationActions.reset({ 
     index: 0, 
     key:null, 
     actions: [NavigationActions.navigate({ routeName: 'Home' })] 
     }) 
    ) 
}}