如何使用带选项卡的抽屉在 react-native-router-flux v4 中进行导航

Question

如何在反应本机路由器通量中组合选项卡和抽屉？

我已经有了我的标签，他们可以工作：

  <Router>
    <Scene hideNavBar key='root'>
      <Tabs
        inactiveTintColor={'#acacac'}
        activeTintColor={'#000'}
        activeBackgroundColor={'#eee'}
        animationEnabled={false}
        swipeEnabled={true}
        tabBarPosition='bottom'>
        <Scene
          tabBarIcon={({ tintColor }) => <Icon name='ios-home' size={25} color={tintColor}/>}
          navBar={Header}
          key='gray'
          component={GrayScreen}
          title='Gray' />
        <Scene
          tabBarIcon={({ tintColor }) => <Icon name='ios-search' size={25} color={tintColor}/>}
          navBar={Header}
          key='scarlet'
          component={ScarletScreen}
          title='Scarlet' />
        <Scene
          tabBarIcon={({ tintColor }) => <Icon name='ios-notifications' size={25} color={tintColor}/>}
          navBar={Header}
          key='red'
          component={RedScreen}
          title='Red' />
        <Scene
          tabBarIcon={({ tintColor }) => <Icon name='ios-mail' size={25} color={tintColor}/>}
          navBar={Header}
          key='blue'
          component={BlueScreen}
          title='Blue' />
      </Tabs>
    </Scene>
  </Router>

我已经尝试了很多东西来添加一个，但它确实有效......

Answer 1

这对我来说很好用

 <Router>
                 <Scene key="root"
                    drawer={true} 
                    contentComponent={SideMenu} 
                    drawerIcon={dr}
                    drawerWidth={260}
                    navigationBarStyle={{backgroundColor:'#16334c'}}
                    titleStyle={{color:'#fff'}}>
                                <Scene 
                                    key="splash"
                                    component={Splash}
                                    hideNavBar
                                    timeout={2000} 
                                    nextScene={'login'} 
                                    initial
                                />
                                <Scene
                                    key="workOrder"
                                    component={WorkOrder}
                                    title="Work Orders"
                                />
                                <Scene
                                    key="addwork"
                                    component={AddWork}
                                    title="Create New Work Order"
                                    back={true}
                                    backButtonTintColor="white"
                                />
                                <Scene
                                    key="prementive"
                                    component={Prementive}
                                    title="PMs"
                                />
                                <Scene
                                    key="scanBarcode"
                                    component={ScanBarcode}
                                    title="Scan or Enter Barcode"
                                />
                                <Scene
                                    key="partLocation"
                                    component={PartLocations}
                                    title="Part Locations"
                                    back={true}
                                    backButtonTintColor="white"
                                />
                                <Scene
                                    key="checkAdjustStock"
                                    component={CheckAdjustStock}
                                    title="Check/Adjust Stock"
                                />
                                <Scene
                                    key="meteredPm"
                                    component={MeteredPm}
                                    title="Metered PMs"
                                />
                                <Scene
                                    key="partsForLocation"
                                    component={PartsForLocation}
                                    title="Parts For Locations"
                                    back={true}
                                    backButtonTintColor="white"
                                />
                                <Scene
                                    key="equipmentForLocation"
                                    component={EquipmentForLocation}
                                    title="Equipment For Locations"
                                />
                                <Scene
                                    key="barcodeAssign"
                                    component={BarcodeAssign}
                                    title="Barcode Assign"

                                />

                                <Scene
                                    key="addPartLocations"
                                    component={AddPartLocations}
                                    title="Add Parts Location"
                                    back={true}
                                    backButtonTintColor="white"
                                />
                                <Scene
                                    key="addBarcodeEquipment"
                                    component={AddBarcodeEquipment}
                                    title="Add Barcode to Equipment"
                                    back={true}
                                    backButtonTintColor="white"
                                />
                                <Scene
                                    key="addBarcodeParts"
                                    component={AddBarcodeParts}
                                    title="Add Barcode to Parts"
                                    back={true}
                                    backButtonTintColor="white"
                                /> 
                                <Scene
                                    key="addPrementive"
                                    component={AddPrementive}
                                    title="Add PM"
                                    back={true}
                                    backButtonTintColor="white"
                                />
                                <Scene
                                    key="addEquipment"
                                    component={AddEquipment}
                                    title="Add Equipment"
                                    back={true}
                                    backButtonTintColor="white"
                                />
                                <Scene
                                    key="addLocation"
                                    component={AddLocation}
                                    title="Add Location"
                                    back={true}
                                    backButtonTintColor="white"
                                />
                                <Scene
                                    key="addParts"
                                    component={AddParts}
                                    title="Add Parts"
                                    back={true}
                                    backButtonTintColor="white"
                                />
                                <Scene
                                    key="equipment"
                                    component={Equipment}
                                    title="Equipment"
                                />
                                <Scene
                                    key="location"
                                    component={Location}
                                    title="Locations"
                               />
                               <Scene
                                    key="parts"
                                    component={Parts}
                                    title="Parts"
                               />

                                <Scene
                                    key="login"
                                    component={Login}
                                    title="Login"
                                />
                                <Scene
                                    key="logout"
                                    component={Logout}
                                    title="Logout"
                                    hideNavBar

                                />
                                <Scene
                                    key="dashboard"
                                    component={Dashboard}
                                    title="Dashboard"
                                />
                            </Scene>
            </Router>