Как создать компонент Drawer и добавить его на несколько экранов

Question

Привет, я хочу создать компонент, используя createDrawerNavigator, и хочу добавить его на все экраны, не могли бы вы мне помочь.

Answer 1

В приведенном ниже примере не копируйте весь синтаксис, поймите концепцию из моего объяснения. Я настроил приставку и многие другие операции импорта, которые вам могут не понадобиться, поэтому настройте и включите содержимое в файлы ниже, как вам нужно.

Имя файла - 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;

Имя файла - SideBar.js

В этом файле укажите макет, любые действия, такие как навигация, вызов API и т. Д. Ящика, который вы хотите импортировать в BurgerMenu.js файл

 /*
    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;

А при App.js импорте Burgermenu.js до 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>
    );
  }
}

Просто откройте меню бургера из любого экрана, импортированного в BurgerMenu.js

В моем примере вы можете открыть его из news.js и gallery.js, которые импортированы в BurgerMenu.js.

Просто используйте следующие функции для открытия и закрытия

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

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