如何将抽屉导航器放入堆栈naviagtor中

时间:2019-01-08 05:14:19

标签: react-native react-native-navigation

const CustomDrawerComponent = (props)=>(
  <SafeAreaView>
    <View style={{height:150, backgroundColor:'white', alignItems:'center', justifyContent:'center'}}>
      <Image source={require('./logo.png')} style={{height:120, width:120, borderRadius:60}} />
    </View>
    <ScrollView>
      <DrawerItems {...props} />
    </ScrollView>
  </SafeAreaView> )


const customstack = createStackNavigator({
  Location : {screen : Location},
  AddVehicleOne : {screen : AddVehicleOne},
  AddVehicleTwo : {screen : AddVehicleTwo},
  BookService : {screen : BookService},
  ContactAdmin : {screen : ContactAdmin},
},{
  headerMode: 'none',
  navigationOptions:({navigation}) => ({
    header: null,
  }),

})


const orderstack = createStackNavigator({
  OrderHistory : {screen : OrderHistory},
  HistoryDetails: {screen : HistoryDetails},

},{
  headerMode: 'none',
  navigationOptions:({navigation}) => ({
    header: null,
  }),

})



const drawerNavigator = createDrawerNavigator({
  VehicleScreen: {
    screen: HomeScreen,
    navigationOptions: {drawerLabel: 'Add Vehicle',}
  },

  MOrderScreen: {
    screen: orderstack,
    navigationOptions: {drawerLabel: 'My Order',}
  },
  TOrderScreen: {
    screen: TrackOrder,
    navigationOptions: {drawerLabel: 'Track Order',}
  },
  NotificationsScreen: {
    screen: SettingsScreen,
    navigationOptions: {drawerLabel: 'Notifications',}
  },
  WorksScreen: {
    screen: SettingsScreen,
    navigationOptions: {drawerLabel: 'How It Works',}
  },
  TermsScreen: {
    screen: SettingsScreen,
    navigationOptions: {drawerLabel: 'Terms & Condition',}
  },
  LogoutScreen: {
    screen: Logout,
    navigationOptions: {drawerLabel: 'Logout',}
  },
  //CustomScreen : { screen : customstack, }
},
  {
    drawerPosition :"left",   contentComponent:CustomDrawerComponent
  });


const RootStack = createStackNavigator({
  SplashScreen: { screen: SplashScreen },
  Login: { screen: Login },
  Signup: {screen: Signup},
  Main: {screen: Main},
  Home: {screen: drawerNavigator,
     headerMode: 'none',
     navigationOptions: ({ navigation }) => ({
              headerLeft:<Icon
                  name="md-menu"
                  size={30}
                  color='#FFFFFF'
                  marginLeft= {25}
                  onPress={() => navigation.toggleDrawer()} />,
                    headerStyle: {
                       backgroundColor: '#008000'
                    }
          })
         },

}, {
  initialRouteName: 'SplashScreen'
}) 

const AppNavigator = createAppContainer(RootStack)
export default AppNavigator;

我有一个堆栈导航器,其中在一个特定的屏幕中包含一个抽屉式导航器,但是问题是当抽屉打开时它不会隐藏标题/工具栏和状态栏,我尝试了许多可能的方法但找不到解决方案我尝试了很多方法,但它没有隐藏工具栏。我想将堆栈导航器放在抽屉式导航器中,但我不能这样做,因为首先我的应用程序将仅通过堆栈导航器进入启动屏幕和其他屏幕。帮助我,我陷入了困境这种情况

0 个答案:

没有答案