React native 如何创建抽屉组件并将其添加到多个屏幕

您好，我想使用

createDrawerNavigator

创建一个组件，想要添加它所有屏幕您能帮我吗。

在下面的示例中，不要复制所有语法从我的解释中理解概念我已经配置了redux和许多其他导入，您可能不需要这样配置，并根据需要在下面的文件中包含内容。

文件名-

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;

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

并在

App.js

导入

Burgermenu.js

至

StackNavigator

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;

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