如何使用带有标签的Drawer在react-native-router-flux v4中进行导航

时间:2017-10-23 13:09:54

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

如何在react-native-router-flux中结合Tabs和Drawer?

我的Tabs已经工作了:

  <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>

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

1 个答案:

答案 0 :(得分:0)

这对我来说很好

 <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>