工具栏上方的导航抽屉重叠

时间:2019-01-07 06:30:12

标签: 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 个答案:

没有答案