Drawer in React nativer

Question

I Schublade in nativer

<Drawer 
    ref={(ref) => this._drawer = ref} 
    type="overlay" 
    tapToClose={true} 
    content={ <Navigator 

     initialRoute={{name: 'controlpanel'}} 
     renderScene={this.renderScene.bind(this)} 
     />} 

    acceptDoubleTap 
    styles={{main: {shadowColor: '#000000', shadowOpacity: 0.3, shadowRadius: 15}}} 
    onOpen={() => { 
     console.log('onopen') 
     this.setState({drawerOpen: true}) 
    }} 
    onClose={() => { 
     console.log('onclose') 
     this.setState({drawerOpen: false}) 
    }} 
    tweenDuration={100} 
    panThreshold={0.08} 
    disabled={this.state.drawerDisabled} 
    openDrawerOffset={0.2} 
    panOpenMask={0.2} 
    negotiatePan 
    > 

    <Navigator 

     initialRoute={{name: 'main'}} 
     renderScene={this.renderScene.bind(this)} 
     /> 

in Seiten Schublade (Control Komponente) reagieren implementieren, erzeugt I 5-Taste. wenn ich eine Schaltfläche klicken, zeigt es wie folgt aus:

nach meinem Konto klicken, sieht es wie folgt aus:

ich es in voller Größe sein wollen.

Answer 1

Die Eigenschaft content sollte die Komponente erhalten, die in der Schublade angezeigt werden soll, und die untergeordneten Tags der Schublade sollten den Hauptinhalt Ihrer App erhalten.

Ich stelle mir vor, wenn ein Benutzer auf einen Link klickt, sollte er die Schublade schließen und den Inhalt auf Ihrer Hauptseite darstellen, richtig?

Meine Vorschläge sind:

1) Ersetzen Sie Ihre content Eigenschaft nur mit dem Bauteil mit den Links (die 'controlpanel' Punkte, auf die Komponente)

content={ <Navigator 
    initialRoute={{name: 'controlpanel'}} 
    renderScene={this.renderScene.bind(this)} 
    />} 

wie mit etwas ersetzen:

content={<ControlPanel />} 

2) Nachdem Sie auf die Schaltfläche geklickt haben, sollten Sie die Route, die Sie anzeigen möchten, auf Ihr Navigator-Objekt schieben, so dass es auf dem Cor angezeigt wird richtige Position.

navigator.push({ name: 'main' });