如何创建抽屉组件并将其添加到多个屏幕 [英] How to create a Drawer Component and adding it to multiple screens

问题描述

我想通过使用 createDrawerNavigator 创建一个组件，并且想将它添加到所有屏幕，你能帮我吗.

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

推荐答案

在下面的例子中不要复制所有的语法 从我的解释中理解这个概念 我已经配置了 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;

文件名 - SideBar.js

在这个文件中指定布局，任何你想要的抽屉的导航、api调用等操作都被导入到上面的BurgerMenu.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;

并在 App.js 导入 Burgermenu.js 到 StackNavigator

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

只需从导入到的任何屏幕中打开汉堡菜单 BurgerMenu.js

在我的示例中，您可以从导入到 BurgerMenu.js 的 news.js 和 gallery.js 打开它.

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

只需使用以下功能打开和关闭

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

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

这篇关于如何创建抽屉组件并将其添加到多个屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！