无法使用react-native-router-flux一起显示Drawer和Tab Bar

时间:2018-03-06 05:58:25

标签: react-native react-native-router-flux

我正在使用react-native和react-native-router-flux,我想同时使用Drawer sidemenu和tabbar。但它只显示了我放在上面的那个。我的代码如下。如果我首先放置抽屉,那么它只显示抽屉。

import React from 'react'; 
import { StyleSheet, Text, View, Image } from 'react-native'; 
import { Router, Scene, Stack, Tabs, Drawer } from 'react-native-router-flux'; 
import ScarletScreen from './component/ScarletScreen'; 
import ProfileScreen from './component/ProfileScreen'; 
import WhiteScreen from './component/WhiteScreen'; 
import BlackScreen from './component/BlackScreen'; 
import SideMenu from './component/SideMenu';

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

export default class App extends React.Component {   render() {
    return (
      <Router>
        <Scene key="root" hideNavBar>   
            {/* Drawer and it's scenes */}      
            <Drawer key="drawer" drawerImage={require('./img/hamburger.png')} contentComponent={SideMenu}>
              <Scene key="main">
                  <Scene
                      key="scarlet"
                      component={ScarletScreen}
                      title="Scarlet Screen"
                      initial
                  />
                  <Scene
                      key="profile"
                      component={ProfileScreen}
                      title="Profile"
                  />
                  <Scene
                    key="white"
                    component={WhiteScreen}
                    title="White Screen"
                  />
                  <Scene
                    key="black"
                    component={BlackScreen}
                    title="Black Screen"                    
                  />                                  
              </Scene>
            </Drawer> 
            {/* Tab and it's scenes */}
            <Tabs
              key="tabbar"
              tabBarStyle={{ backgroundColor: '#FFFFFF' }}
            >
              {/* Tab and it's scenes */}
              <Scene key="osu" title="OSU" icon={TabIcon}>
                <Scene
                  key="scarlet"
                  component={ScarletScreen}
                  title="Scarlet Screen"
                />
                <Scene
                  key="white"
                  component={WhiteScreen}
                  title="White Screen"
                />
              </Scene>

              {/* Tab and it's scenes */}
              <Scene key="um" title="UM" icon={TabIcon}>
                <Scene
                  key="white"
                  component={WhiteScreen}
                  title="White"
                />
                <Scene
                  key="black"
                  component={BlackScreen}
                  title="Black"
                />
              </Scene>
            </Tabs>                                 
          </Scene>
      </Router>     
    );   } }

here enter image description here

如果我先放置tabbar,那么它只显示标签栏,汉堡包菜单图标就消失了。

  {/* Tab and it's scenes */}
  <Tabs
    key="tabbar"
    tabBarStyle={{ backgroundColor: '#FFFFFF' }}
  >
    {/* Tab and it's scenes */}
    <Scene key="osu" title="OSU" icon={TabIcon}>
      <Scene
        key="scarlet"
        component={ScarletScreen}
        title="Scarlet Screen"
      />
      <Scene
        key="white"
        component={WhiteScreen}
        title="White Screen"
      />
    </Scene>

    {/* Tab and it's scenes */}
    <Scene key="um" title="UM" icon={TabIcon}>
      <Scene
        key="white"
        component={WhiteScreen}
        title="White"
      />
      <Scene
        key="black"
        component={BlackScreen}
        title="Black"
      />
    </Scene>
  </Tabs>  
  {/* Drawer and it's scenes */}      
  <Drawer key="drawer" drawerImage={require('./img/hamburger.png')} contentComponent={SideMenu}>
    <Scene key="main">
        <Scene
            key="scarlet"
            component={ScarletScreen}
            title="Scarlet Screen"
            initial
        />
        <Scene
            key="profile"
            component={ProfileScreen}
            title="Profile"
        />
        <Scene
          key="white"
          component={WhiteScreen}
          title="White Screen"
        />
        <Scene
          key="black"
          component={BlackScreen}
          title="Black Screen"                    
        />                                  
    </Scene>
  </Drawer>

enter image description here

我使用enter image description here创建我的react-native app

0 个答案:

没有答案