在 react-native-router-flux 中定义的 Router 组件内创建导航抽屉

Question

我正在尝试使用“react-native-router-flux”库组件创建如下所示的导航抽屉：

我也想要这样的“汉堡”菜单图标：

我浏览了多个 stackoverflow 问题和其他文章，但找不到创建此抽屉的方法。我能够显示汉堡菜单图标，但无法创建具有多个选项的抽屉。

我的代码：

const navBarButton = () => {
    return(
      <TouchableOpacity onPress={() => Actions.refresh({ key: 'scene2', open: true })}>
        <Icon 
            name='three-bars' 
            size={30} 
            color='#000' 
            onPress={() => Actions.aboutUs()}
            />
      </TouchableOpacity>
    );
}const Routes = () => {
    
    return(
    <Router renderLeftButton={navBarButton}>

        <Scene key ="root">
            <Scene key = "scene1" title = "scene1" component = { scene1 } initial = {true} />
            <Scene key = "scene2" title = "scene2"  component = { scene2 } />
        </Scene>

    </Router>
    );
}
export default Routes;

我还需要创建哪些组件以及如何将它们与现有代码集成以创建导航抽屉？

==============更新代码=========

import SideMenu from 'react-native-side-menu';
import Home from './components/Home';
import AboutUs from './components/AboutUs';
import {Scene, Actions , Drawer, Stack} from 'react-native-router-flux';

export default function NavigationDrawer() {
  return (
    <Drawer
          hideNavBar = {true}
          key="drawerMenu"
          contentComponent={SideMenu}
          drawerWidth={300}
          drawerPosition="left"
          drawerIcon={
            <TouchableOpacity onPress={() => Actions.refresh({ key: 'home', open: true })}>
                <Icon 
                name='three-bars' 
                size={30} 
                color='#000' 
                onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
                />
            </TouchableOpacity>
            }
        >
          <Stack key="mainContainer">
            <Scene
              key="home"
              component={Home}
              title="Home"
              navigationBarStyle={{
                backgroundColor: "black"
              }}
              navBarButtonColor={"blue"}
            />
            <Scene
              key="aboutUs"
              component={AboutUs}
              title="AboutUs"
              navigationBarStyle={{
                backgroundColor: "black"
              }}
              navBarButtonColor={"blue"}
            />
          </Stack>
        </Drawer>
  );
}

Answer 1

这是 react-native-router-flux 中 Drawer 的实现。

        <Drawer
          hideNavBar
          key="drawerMenu"
          contentComponent={SideMenu}
          drawerWidth={300}
          drawerPosition="left"
          drawerIcon={<DrawerIcon />}
        >
          <Stack key="mainContainer">
            <Scene
              key="homeScreen"
              component={HomeScreen}
              title="Home"
              navigationBarStyle={{
                backgroundColor: TABS_BACKGROUND_COLOR
              }}
              navBarButtonColor={MAIN_BACKGROUND_COLOR}
            />
            <Scene
              key="societiesScreen"
              component={SocietiesScreen}
              title="Societies"
              navigationBarStyle={{
                backgroundColor: TABS_BACKGROUND_COLOR
              }}
              navBarButtonColor={MAIN_BACKGROUND_COLOR}
            />
            ...
          </Stack>
        </Drawer>

这是打开抽屉的功能。

_showDrawer  = () => {
    return () => {
            Actions.refresh({key: 'drawerMenu', open: true });
};