Question

嗨，我想使用createDrawerNavigator创建一个组件，并希望将其添加到所有屏幕中。

Answer 1

在下面的示例中，不要复制所有语法，请从我的解释中了解概念。我已经配置了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

在此文件中，指定要导入到BurgerMenu.js文件上方的抽屉的布局，导航，api调用等任何操作

 /*
    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的{{1}}和gallery.js中打开它。

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

BurgerMenu.js

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

1 个答案: