react-native-router-flux与抽屉和tabBar在同一页面中

Question

我正在使用react-native-router-flux版本3.37.0与react native et redux。一切正常，显示标签栏，导航栏和导航是正确的。然后，我必须在我有标签栏的相同页面中添加一个侧面菜单（抽屉）。我在网上找到的任何一个例子都没有显示同一页面中的两个不同菜单。我不知道它是如何工作的。如果我将抽屉放在标签栏的根部，则标签栏会消失。我确定它必须是一个简单的问题，但我不能让它发挥作用。

请帮忙！

这里我有基本的sideMenu组件：

import React from 'react';
import {StyleSheet, Text, View} from "react-native";
import Button from 'react-native-button';
import { Actions } from 'react-native-router-flux';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
});

const SideMenu = (props, context) => {
  const drawer = context.drawer;
  return (
    <View style={[styles.container, props.sceneStyle ]}>
      <Text>Tab {props.title}</Text>
      <Button onPress={() => { drawer.close(); Actions.main(); }}>Switch to main</Button>
    </View>
  );
};

export default SideMenu;

这里包含sideMenu的sideDrawer：

import React from 'react';
import Drawer from 'react-native-drawer';
import { DefaultRenderer, Actions } from 'react-native-router-flux';

import SideMenu from '../SideMenu/SideMenu';

class SideDrawer extends React.Component {
  render() {
    const state = this.props.navigationState;
    const children = state.children;
    return (
      <Drawer
        ref="navigation"
        type="displace"
        onOpen={() => Actions.refresh({ key: state.key, open: true })}
        onClose={() => Actions.refresh({ key: state.key, open: false })}
        content={<SideMenu />}
        tapToClose
        openDrawerOffset={0.2}
        panCloseMask={0.2}
        negotiatePan
        tweenHandler={(ratio) => ({
          main: { opacity: Math.max(0.54, 1 - ratio) },
        })}
      >
        <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
      </Drawer>
    );
  }
}

export default SideDrawer;

......这里是路由器。我会剪切一些代码以使其更具可读性。

import React from 'react';
import { Provider } from 'react-redux';
import { AppRegistry, Text } from 'react-native';
import { Actions, Scene, Router } from 'react-native-router-flux';
import LogIn from './containers/LogIn/LogIn';
import Main from './containers/Main/Main';
import Profile from './containers/Profile/Profile';
import SideDrawer from './components/SideDrawer/SideDrawer';

const TabIcon = ({ selected, title }) => {
    return (
    <Text style={{ color: selected ? 'red' : 'black' }}>{title}</Text>
    );
};

export default function native() {
  const Qweety = React.createClass({
    render() {
      return (
        <Provider store={configureStore()} >
          <Router>
            <Scene key='root'>
              <Scene 
                key='login'
                component={LogIn}
                hideNavBar
                initial
                type='replace'
              />
                {/* SIDE MENU */}
                <Scene 
                  key='drawer'
                  component={SideDrawer}
                  type='replace'
                >
                  {/* TABS MENU */}
                  <Scene 
                    key='tabbar'
                    tabs
                    hideNavBar 
                    tabBarStyle={{ backgroundColor: 'white' }}
                    type='replace'
                  >
                    {/* HOME PAGE */}
                    <Scene key='home' title='Home' icon={TabIcon}>
                      <Scene 
                        key='main'
                        component={Main}
                        title='Main'
                        initial
                      />
                    </Scene>
                    {/* PROFILE PAGE */}
                    <Scene key='2' title='Prof' icon={TabIcon}>
                      <Scene 
                        key='profile'
                        component={Profile}
                        title='Profile'
                      />
                    </Scene>
                  </Scene>
                </Scene>
            </Scene>
          </Router>
        </Provider>
      );
    }
  });

  AppRegistry.registerComponent('qweety', () => Qweety);
}