React Native: -Wie Verwenden einer gemeinsamen Schublade und Symbolleiste auf allen Seiten mit Steuerelement

Question

Ich bin ein Neuling in React Native.
Ich möchte eine Schublade und Symbolleiste für Android und iOS machen.
Ich schrieb den Code der Schublade und Symbolleiste auf meiner Hauptseite, wo ich Navigator habe.

Wie für z.

<Drawer> 
    <Toolbar /> 
    <Navigator /> 
</Drawer> 

Also ich habe Schublade und Symbolleiste in allen inneren Seiten. Jetzt stellt sich die Frage, wie ich die Schublade und die Werkzeugleiste kontrollieren kann.
Wenn ich eine Seite haben möchte, wo ich nicht die Schublade Funktion anzeigen möchte und ich Optionen in der Symbolleiste nach Seiten innerhalb der Anwendung anzeigen/ausblenden möchten.

Jede Hilfe würde sehr geschätzt werden.

Jeder andere bessere Weg, um das oben genannte zu erreichen.

Dank

Answer 1

Der beste Weg, diese Art von Navigationsproblemen zu tun ist mit react-router so können Sie die Route Konfiguration jeder Ansicht entscheiden. Sie können ein Element erstellen, das auf einigen Unterelementen, nicht aber auf anderen angezeigt wird.

Auch Sie können die Route, wo Sie sind und die Elemente auf einer Komponente entsprechend ändern. Here Sie können mehr Informationen darüber finden, wie man das bekommt.

Answer 2

Vielleicht sollten Sie einen Blick auf react-native-router-flux werfen. Sie können Ihre Szenenübergänge an einer zentralen Stelle definieren und auch which scenes will be wrapped by a Drawer deklarieren.

import {Scene, Router} from 'react-native-router-flux'; 

class App extends React.Component { 
    render() { 
    return <Router> 
     <Scene key="root"> 
     <Scene key="login" component={Login} title="Login"/> 
     <Scene key="register" component={Register} title="Register"/> 
     <Scene key="drawer" component={Drawer} open={false} > 
      <Scene key="home" component={Home}/> 
        .... 
      </Scene> 
      <Scene key="products" component={Products}/> 
     </Scene> 

     </Scene> 
    </Router> 
    } 
} 

Für die Toolbar-Aktionen können Sie einfach eine Toolbar-Komponente in jeder Szene haben.

class Home extends React.Component { 
    render() { 
    return (
     <View> 
     <Toolbar/>  
     </View> 
    } 
} 

class Products extends React.Component { 
    render() { 
    return (
     <View> 
     <Toolbar/>  
     </View> 
    } 
} 

Answer 3

Wenn Sie mit Redux (oder etwas anderes gleichermaßen, die einen einzigen Ort hat Ihren App Zustand zu halten) Sie diese Objekte Artikel in Ihrem Zustand Baum verweisen machen können. Zum Beispiel könnten Sie eine Eigenschaft in Ihrem Zustand (store.navigationState.currentScene) erstellen und Ihre Toolbar.subtitle Punkte dazu machen.

Jetzt, jedes Mal, wenn Sie zu einer anderen Szene navigieren, könnten Sie Ihre currentScene aktualisieren und der Untertitel Ihrer Symbolleiste würde auch ändern.