Status der React Navigation-Schublade? (offen oder geschlossen)

Question

Ich baue eine Schublade mit React Navigation und möchte etwas Logik ausführen, wenn der Benutzer die Schublade schließt. Ich sehe nichts Offensichtliches in der Dokumentation, die mir erlaubt, dies zu tun. Kennt jemand eine Möglichkeit, dies zu tun?

Answer 1

Hmm nicht wirklich viel zu sehen. Eine Möglichkeit wäre, zu steuern das Öffnen/Schließen der Schublade manuell mit:

this.props.navigation.navigate('DrawerOpen'); // open drawer 
this.props.navigation.navigate('DrawerClose'); // close drawer 

Auf diese Weise können Sie Ihre öffnen/schließen Ereignisse in einer Funktion wickeln, wo Sie tun können, was Sie wollen vor dem Öffnen/Schließen.

Die einzige andere mögliche Lösung, die ich in ihren Dokumenten sah, war eine benutzerdefinierte contentComponent. Sie können eine Funktion an das Ereignis onItemPress(route) übergeben, also können Sie vielleicht versuchen, sich daran zu orientieren.

Answer 2

Sie müssen benutzerdefinierte Navigations Aktionen die DrawerClose Ereignis erfassen:

const MyDrawerNavigator = DrawerNavigator({ 
    //... 
}); 

const defaultGetStateForAction = MyDrawerNavigator.router.getStateForAction; 

MyDrawerNavigator.router.getStateForAction = (action, state) => { 

    //use 'DrawerOpen' to capture drawer open event 
    if (state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerClose') { 
     console.log('DrawerClose'); 
     //write the code you want to deal with 'DrawerClose' event 
    } 
    return defaultGetStateForAction(action, state); 
}; 

Answer 3

Nach @ufxmeng

import { 
    StatusBar, 
} from "react-native"; 

const MyDrawerNavigator = DrawerNavigator({ 
    //... 
}); 

const defaultGetStateForAction = MyDrawerNavigator.router.getStateForAction; 

MyDrawerNavigator.router.getStateForAction = (action, state) => { 
    if(state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerClose') { 
     StatusBar.setHidden(false); 
    } 

    if(state && action.type === 'Navigation/NAVIGATE' && action.routeName === 'DrawerOpen') { 
     StatusBar.setHidden(true); 
    } 


    return defaultGetStateForAction(action, state); 
}; 

Siehe hier https://github.com/react-community/react-navigation/blob/673b9d2877d7e84fbfbe2928305ead7e51b04835/docs/api/routers/Routers.md und hier https://github.com/aksonov/react-native-router-flux/issues/699

Answer 4

Ohne Redux Integration sein kann verwendet onNavigationStateChange auf Router-Komponente. Schubladenaktionen einfach abfangen: DrawerOpen und DrawerClose.

Beispiel:

handleNavigationState = (previous, next, action) => {  
    if (action.routeName === 'DrawerOpen') { 
     this.props.setDrawerState(true); 
    } else if (action.routeName === 'DrawerClose') { 
     this.props.setDrawerState(false); 
    } 
    } 

    render() { 
    return (
     <Router onNavigationStateChange={this.handleNavigationState} /> 
    ); 
    }