React Native: Wie kann die Navigation für React Native Drawer mithilfe von NavigationExperimental korrekt implementiert werden?

Question

In React Native + Redux, ich habe eine funktionierende React Native Schublade https://github.com/root-two/react-native-drawer aber versucht, Navigationsschaltflächen darauf zu implementieren mit NavigationExperimental, genauer NavigationCardStack. Also habe ich drei Tasten auf der Schublade, und wenn ich versuche, zwischen ihnen zu navigieren, bekomme ich einen Fehler: should not push route with duplicated key (zB wenn ich ProfilePage Knopf drücken, dann HomePage Knopf, und dann wieder ProfilePage, dann würde ich den Fehler bekommen)

Was könnte das Problem sein? Navigiere ich korrekt? Wenn nicht, was wäre die richtige Art, zwischen den Szenen zu navigieren, indem Sie die Navigationstasten im React Native Drawer verwenden?

Hier ist mein ein:

_renderScene (props) { 
    const { route } = props.scene 

    return (
     <route.component _handleNavigate={this._handleNavigate} actions={this.props}/> 
    ) 
    } 

    _handleBackAction() { 
    if (this.props.navigation.index === 0) { 
     return false 
    } 
    this.props.popRoute() 
    return true 
    } 

    _handleNavigate(action) { 
    switch (action && action.type) { 
     case 'push': 
     this.props.pushRoute(action.route) 
     return true 
     case 'back': 
     case 'pop': 
     return this._handleBackAction() 
     default: 
     return false 
    } 
    } 

    <Drawer 
    content={<DrawerPanel {...this.props} _handleNavigate={this._handleNavigate}/>} 
    openDrawerOffset={100} 
    ref={(ref) => this._drawer = ref} 
    type='static' 
    tweenHandler={Drawer.tweenPresets.parallax} 
    tapToClose 
    acceptPan 
    negotiatePan 
    > 
    <NavigationCardStack 
     direction='horizontal' 
     navigationState={this.props.navigation} 
     onNavigate={this._handleNavigate} 
     renderScene={this._renderScene} 
    /> 
    </Drawer> 

_handleNavigate(route) auf drücken für die Navigationstaste auf dem Native-Drawer Reagieren Verwendung, das ist, wie die route formatiert werden würde:

const route = { 
    group: { 
    type: 'push', 
    route: { 
     key: 'profilepage', 
     title: 'ProfilePage', 
     component: ProfilePage, 
     direction: 'horizontal', 
    }, 
    } 
} 

Und .push und .pop werden von meinem naviReducer.js

01 behandelt

Answer 1

Bitte überprüfen Sie das Gespräch here und meine Antwort. Lassen Sie es mich wissen, wenn es für Ihr Problem sinnvoll ist.