React native 反应本机：如何结合反应本机路由器流量和反应本机抽屉？

我正在尝试将

react native router flux

与

react native drawer

我的主要组件实际上是App.js。我只复制/粘贴相关的部分

import AppRoutes from './Router';
...
constructor(props) {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        Actions.mainBucket({ type: 'reset' });
      } else {
        Actions.authBucket({ type: 'reset' });
      }
    });
    super(props);
  }
}
...
  render() {
    const store = createStore(
      reducers, 
      {}, 
      applyMiddleware(ReduxThunk)
    );

    return (
      <Provider store={store}>
        <AppRoutes />
      </Provider>
    );
  }

第二个几乎是空的SideMenu.js

import React from 'react';
import { View, Text } from 'react-native';

const SideMenu = () => (
  <View>
    <Text> 
      SideMenu
    </Text>
  </View>
);

export default SideMenu;

从“React”导入React；
从“react native”导入{View，Text}；
常量侧菜单=（）=>(
副菜单
);
导出默认侧菜单；

然后我尝试修改场景定义，将NavigationDrawer组件添加到mainBucket定义中

<Scene key="mainBucket" component={NavigationDrawer}>
  <Scene key="schedule" initital component={Schedule} title="Impegni" hideNavBar={false} />
  <Scene key="peopleList" component={PeopleList} title="Lista persone" hideNavBar={false} />
</Scene>

问题是我再也看不到带有标题的react原生路由器流量头了，所以我再也看不到顶部的操作栏了

---

我做错了什么？

这很有效。我用另一个场景包装了整个mainBucket，在这个场景中，我使用了抽屉作为组件

还请注意，我将样式移动到了单个场景

const scenes = Actions.create(
  <Scene key="root">

    <Scene key="splashBucket">
      <Scene key="splashScene" component={SplashScreen} title="Splash Screen Title" hideNavBar />
    </Scene>

    <Scene key="authBucket" sceneStyle={{ paddingTop: 65 }}>
      <Scene key="authScene" component={AuthForm} title="Accesso" hideNavBar={false} />
    </Scene>

    <Scene key="mainBucket" component={NavigationDrawer}>
      <Scene key="mainBucketInternal">
        <Scene 
          initital
          key="schedule" 
          component={Schedule} 
          title="Impegni" 
          hideNavBar={false} 
          sceneStyle={{ paddingTop: 65 }} 
        />
        <Scene 
          key="peopleList" 
          component={PeopleList} 
          title="Lista persone" 
          hideNavBar={false} 
          sceneStyle={{ paddingTop: 65 }} 
        />
      </Scene>
    </Scene>

  </Scene>
);

const AppRoutes = () => (
  <Router 
    scenes={scenes}
  />
);

export default AppRoutes;

const scenes=Actions.create(
);
常数批准=（）=>(
);
导出默认批准；

Hi。谢谢你的解释。你能解释一下如何为标签实现这一点吗。选项卡的数量根据身份验证而变化。

<Scene key="mainBucket" component={NavigationDrawer}>
  <Scene key="schedule" initital component={Schedule} title="Impegni" hideNavBar={false} />
  <Scene key="peopleList" component={PeopleList} title="Lista persone" hideNavBar={false} />
</Scene>

const scenes = Actions.create(
  <Scene key="root">

    <Scene key="splashBucket">
      <Scene key="splashScene" component={SplashScreen} title="Splash Screen Title" hideNavBar />
    </Scene>

    <Scene key="authBucket" sceneStyle={{ paddingTop: 65 }}>
      <Scene key="authScene" component={AuthForm} title="Accesso" hideNavBar={false} />
    </Scene>

    <Scene key="mainBucket" component={NavigationDrawer}>
      <Scene key="mainBucketInternal">
        <Scene 
          initital
          key="schedule" 
          component={Schedule} 
          title="Impegni" 
          hideNavBar={false} 
          sceneStyle={{ paddingTop: 65 }} 
        />
        <Scene 
          key="peopleList" 
          component={PeopleList} 
          title="Lista persone" 
          hideNavBar={false} 
          sceneStyle={{ paddingTop: 65 }} 
        />
      </Scene>
    </Scene>

  </Scene>
);

const AppRoutes = () => (
  <Router 
    scenes={scenes}
  />
);

export default AppRoutes;