How to create a Drawer Component and adding it to multiple screens

问题

Hi i want to create a component by using a createDrawerNavigator, and want to add it all screens could you help me.

回答1:

In the below example don't copy all the syntax understand the concept from my explanation I have configured redux and many other imports you may not need so configure and include content in below files as you need.

File name - BurgerMenu.js

import React, { Component } from "react";
import SideBar from "./SideBar.js";
import News from "../../Containers/News";  // import your screens instead
import Copyright from '../../Containers/Gallery' // import your screens instead
import { DrawerNavigator } from "react-navigation";

const BurgerMenu = DrawerNavigator(
  {
    News: { screen: News },
    RulesOfUse: { screen: RulesOfUse },
    Copyright: { screen: Copyright }
  },
  {
    contentComponent: props => <SideBar {...props} />
  }
);

export default BurgerMenu;

File name - SideBar.js

In this file specify the layout, any actions like navigation, api call etc of drawer as you want which is imported to above BurgerMenu.js file

 /*
    SideBar.js

    Component used to render contents of SideBar
*/

import React from 'react';
import { View, Modal, Text, Linking } from 'react-native';

const {
    modalBackground,
    topContentStyle,
    bottomContentStyle
} = styles;

class SideBar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };
    }

    componentDidMount() {

    }

    render() {
        return (
               <View
                    elevation={5}
                    style={modalBackground}
                >

                </View>
        );
    }
  }

export default SideBar;

And in the App.js import Burgermenu.js to StackNavigator

import React, { Component } from 'react'
import { Provider } from 'react-redux';
import { StackNavigator } from 'react-navigation';
import Splash from './src/App/Containers/Splash';
import Login from './src/App/Containers/Login';
import InformationPage from './src/App/Containers/Gallery'
import BurgerMenu from './src/App/Components/BurgerMenu/index'
import configureStore from './src/RNRedux/ConfigureStore';


// Manifest of possible screens
const PrimaryNav = StackNavigator({
  Splash: { screen: Splash },
  Login: { screen: Login },
  Home: { screen: BurgerMenu },
  InformationPage: { screen: InformationPage }
 }, {
    // Default config for all screens
    headerMode: 'none',
    initialRouteName: 'Splash',
  });

export default class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      channelId: ""
    };
    this.store = configureStore();
  }

  componentDidMount() {

  }

  componentWillMount() {

  }

  render() {
    return (
      <Provider store={this.store}>
        <PrimaryNav />
      </Provider>
    );
  }
}

Just open the burger menu from any the screens imported to BurgerMenu.js

In my example you can open it from news.js and gallery.js which are imported to BurgerMenu.js.

Just use below functions for open and close

openBurgerMenu() {
        this.props.navigation.openDrawer();
    }

closeBurgerMenu() {
        this.props.navigation.closeDrawer();
    }

来源：https://stackoverflow.com/questions/53149677/how-to-create-a-drawer-component-and-adding-it-to-multiple-screens

标签

react-native

react-navigation