我正在使用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>
); } }
如果我先放置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>