React Native: -How to use a common box and toolbar on all pages with control

Question

I am new to React Native.
I want to make a box and toolbar for Android and ios. I wrote a box code and a toolbar on my main page, where I have a navigator.

Such as,

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

So, I got a box and a toolbar on all the inner pages. But now the question is how can I control the drawer and toolbar.
For example, if I need one page on which I do not want to show the box function, and I want to show / hide the options on the toolbar according to the pages inside the application.

Any help would be greatly appreciated.

Any other best way to achieve the above.

thank

Answer 1

, react-native-router-flux. , .

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>
  }
}

.

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

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

Answer 2

redux ( - , ), . , (store.navigationState.currentScene) Toolbar.subtitle.

, , , currentScene, .

Answer 3

- react-router   . , , .

You can also find out the route where you are and change the elements on the component in accordance with this. Here you can find more information on how to get this.