React Native:-How to use a common drawer and toolbar across all pages with control

问题

I am a newbie in React Native.
I wanna make a drawer and toolbar for android and ios both.
I wrote the code of drawer and toolbar in my mainpage where I have navigator.

Like for eg.

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

So I got drawer and toolbar in all inner pages. But now the question is how do I have control over drawer and toolbar.
Like If I want one page where I dont want to show the drawer feature and I want to show/hide options on toolbar according to pages inside the application.

Any help would be greatly appreciated.

Any other better way to achieve the above.

Thanks

回答1:

Maybe you should have a look at react-native-router-flux. You can define your scene transitions in one central location, and also declare which scenes will be wrapped by a Drawer.

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

For the Toolbar actions, you can simply have a Toolbar component inside each scene.

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

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

回答2:

If you're using redux (or something else alike that has a single place to keep your app state) you can make these objects references items inside your state tree. For instance, you could create a property inside your state (store.navigationState.currentScene) and make your Toolbar.subtitle points to that.

Now, everytime you navigate to a different scene, you could update your currentScene and the subtitle of your toolbar would also change.

回答3:

The best way to do this kind of navigation issues is with react-router so you can decide the route configuration of every view. You can create an element to be shown on some subelements but not on others.

Also you can know the route where you are and change elements on a component according to that. Here you can find more information about how to get that.

来源：https://stackoverflow.com/questions/38636421/react-native-how-to-use-a-common-drawer-and-toolbar-across-all-pages-with-contr

标签

android

reactjs

react-native

navigation-drawer

toolbar